Modify order of form fields in upload request

[Nick Lechnowskyj]

When uploading to Amazon S3 using a post policy it requires that "key" be the first form field. How can I configure my request so that the uploader file form field is last in the request? Please see photo.

I'm using uploading event to configure the custom request data before each upload, but I can't configure order of the Upload components file in the request.

    onUploading(arg: UploadingEventArgs | undefined): void {

        if (arg === undefined) return;

        

        let formDatas = new Array<{ [key: string]: Object }>(

            { 'key': this.uploadConfig.keyPath + arg.fileData.name },

            { 'AWSAccessKeyId': this.uploadConfig.accessKeyId },

            { 'acl': this.uploadConfig.acl },

            { 'x-amz-meta-uuid': this.uploadConfig.directoryUuid },

            { 'Content-Type': this.uploadConfig.contentType },

            { 'Policy': this.uploadConfig.policy },

            { 'Signature': this.uploadConfig.signature }

        );

        for (let i = 0; i < formDatas.length; i++) {

            arg.customFormData.push(formDatas[i]);

        }

    }

[Berly Christopher]

Hi Nick, 

  

Greetings from Syncfusion support. 

  

We have checked the requested requirement. We could not change the order of request based on the certain condition on the files which you selected since we have formed the request from the source level. This is the default behavior of the component. 

  

So, we have overridden the source method named “uploadFilesRequest” to append the custom form data after original form data in the request. Kindly refer the below sample below. 

  

Sample: https://stackblitz.com/edit/react-8wxylm 

  

Screenshot: 

 

  

Regards, 

Berly B.C 

[Nick Lechnowskyj]

Hi, thank you.

I am having an issue in Typescript where the uploadFilesRequest overload is not being invoked. My onCreated function is being invoked though.

onCreated() {

        (Uploader.prototype as any).uploadFilesRequest = function (selectedFiles: any, i: any, custom: any) {

            var _this = this;

            var cloneFiles: any = [];

            var chunkEnabled = this.checkChunkUpload();

            var ajax = new Ajax(this.asyncSettings.saveUrl, 'POST', true, undefined);

            ajax.emitError = false;

            var getFileData;

            /* istanbul ignore next */

            if (this.isServerBlazor) {

                getFileData = selectedFiles.slice(0);

                cloneFiles.push(getFileData[i].rawFile);

            }

            var eventArgs = {

                fileData: this.isServerBlazor ? getFileData[i] : selectedFiles[i],

                customFormData: [],

                cancel: false,

            };

            var formData = new FormData();

            ajax.beforeSend = function (e: any) {

                (eventArgs as any).currentRequest = ajax.httpRequest;

                /* istanbul ignore next */

                if (isBlazor()) {

                    eventArgs.fileData.rawFile = !chunkEnabled

                        ? _this.base64String[i]

                        : eventArgs.fileData.rawFile;

                    if (_this.currentRequestHeader) {

                        _this.updateCustomheader(

                            ajax.httpRequest,

                            _this.currentRequestHeader

                        );

                    }

                    if (_this.customFormDatas) {

                        _this.updateFormData(formData, _this.customFormDatas);

                    }

                }

            };

            if (selectedFiles[i].statusCode === '1') {

                _this.trigger('uploading', eventArgs, function (eventArgs: any) {

                    /* istanbul ignore next */

                    if (_this.isServerBlazor && !chunkEnabled) {

                        selectedFiles[i].rawFile = eventArgs.fileData.rawFile =

                            cloneFiles[i];

                    }

                    if (eventArgs.cancel) {

                        _this.eventCancelByArgs({}, eventArgs, selectedFiles[i]);

                    }

                    _this.updateFormData(formData, eventArgs.customFormData);

                });

                var name_5 = this.element.getAttribute('name');

                formData.append(

                    name_5,

                    selectedFiles[i].rawFile,

                    selectedFiles[i].name

                );

                if (

                    chunkEnabled &&

                    selectedFiles[i].size > this.asyncSettings.chunkSize

                ) {

                    this.chunkUpload(selectedFiles[i], custom, i);

                } else {

                    ajax.onLoad = function (e) {

                        if (eventArgs.cancel && _this.isServerBlazor) {

                            return {};

                        } else {

                            _this.uploadComplete(e, selectedFiles[i], custom);

                            return {};

                        }

                    };

                    ajax.onUploadProgress = function (e: any) {

                        if (eventArgs.cancel && _this.isServerBlazor) {

                            return {};

                        } else {

                            _this.uploadInProgress(e, selectedFiles[i], custom, ajax);

                            return {};

                        }

                    };

                    /* istanbul ignore next */

                    ajax.onError = function (e: any) {

                        _this.uploadFailed(e, selectedFiles[i]);

                        return {};

                    };

                    ajax.send(formData);

                }

            }

        };

    }

    componentDidMount() {

        setTimeout(() => {

            this.rendereComplete();

        });

    }

    rendereComplete() {

        //this.uploadObj.dropArea = this.dropContainerEle;

        this.uploadObj.element.setAttribute('name', 'file');

        this.uploadObj.dataBind();

    }

    public render(): JSX.Element {

        return (

            <div id='dropArea' onClick={this.dropAreaClick = this.dropAreaClick.bind(this)} ref={dropEle => { this.dropAreaRef = dropEle! }}>

                <UploaderComponent id='file'

                    ref={upload => { this.uploadObj = upload! }}

                    type={"file"}

                    asyncSettings={this.path}

                    uploading={this.onUploading = this.onUploading.bind(this)}

                    progress={this.onFileUpload = this.onFileUpload.bind(this)}

                    selected={this.onSelect = this.onSelect.bind(this)}

                    success={this.onuploadSuccess = this.onuploadSuccess.bind(this)}

                    failure={this.onuploadFailed = this.onuploadFailed.bind(this)}

                    template={this.uploaderTemplate = this.uploaderTemplate.bind(this)}

                    created={this.onCreated.bind(this)} />

            </div>);

[Berly Christopher]

Hi Nick, 

  

As per the requirement, we have prepared the sample in TSX and source overridden method will be fired on file selection correctly. Kindly refer the below screenshot.  

  

 

  

Sample in TSX: https://stackblitz.com/edit/react-ts-wupoxw?file=index.tsx  

  

Regards, 

Berly B.C 

[Nick Lechnowskyj]

Hi,

When I compile I get the following error:

Property 'uploadFilesRequest' is private and only accessible within class 'Uploader'.

[Prince Oliver]

Hi Nick, 

Thank you for your update. 

The mentioned error “Property 'uploadFilesRequest' is private and only accessible within class 'Uploader'.” is typing error. Since we need to access and override the components private methods in order to achieve you requirement. We recommend you to cast any such properties to “any” type. 

(Uploader.prototype as any).uploadFilesRequest 

Let us know if you need any further assistance. 

Regards, 

Prince 

[Nick Lechnowskyj]

Hi,

Using this.uploadObj worked for me.

(this.uploadObj as any).uploadFilesRequest = function(selectedFiles, i, custom)

[Berly Christopher]

Hi Nick, 

  

We are glad to know that the issue is resolved at your end. Please let us know if you need further assistance on this. 

  

Regards, 

Berly B.C