Uploading to incorrect URL

[s1rc]

Testing our your uploader with the following:

        $('#dropTarget').FancyFileUpload({
            params: {
                action: 'http://localhost::8080/media/upload'
            },
            edit : false,
            maxfilesize : 512000000,
            fileupload : {
                maxChunkSize : 1000000
            },
            added : function(e, data) {
                this.find('.ff_fileupload_actions button.ff_fileupload_start_upload').click();
            },
            uploadcompleted : function(e, data) {
                data.ff_info.RemoveFile();
            }
        });

This generates the error http://localhost:8080/product/4/[object%20HTMLInputElement], which is the current URL plus [object%20HTMLInputElement].

Changing configuration to:

        $('#dropTarget').FancyFileUpload({
            url: 'http://localhost::8080/media/upload',
            edit : false,
            maxfilesize : 512000000,
            fileupload : {
                maxChunkSize : 1000000
            },
            added : function(e, data) {
                this.find('.ff_fileupload_actions button.ff_fileupload_start_upload').click();
            },
            uploadcompleted : function(e, data) {
                data.ff_info.RemoveFile();
            }
        });

Results in Uncaught TypeError: Cannot read property 'replace' of undefined at:

https://github.com/cubiclesoft/jquery-fancyfileuploader/blob/8ddd6c29cde1fd7d6208f8a2e93f3cfae6dd7df7/fancy-file-uploader/jquery.fancy-fileupload.js#L14

[cubiclesoft]

Do you really have two colons before port 8080 in your code?

url - A string containing the destination URL to use to send the data. The default behavior is to locate the action of the nearest form element to the matching input file element and use that (Default is '').

In other words, by default, it's trying to find: <form action="yourURLhere" ...>

I'm going to need a more complete stack trace than what you have provided. EscapeHTML() is called in quite a few places.

[s1rc]

No there are not 2 colons. That's a typo, the url is generated from a Laravel route.

I have the inside form tags, with the action set:

<form method="POST" action="http://localhost:8080/media/upload" accept-charset="UTF-8" enctype="multipart/form-data">
<input name="_token" type="hidden" value="yYpUn8Ex5OyOIj1aA5xG3s4deDzJxC9mD3IBmhGD">
<input id="dropTarget" type="file" name="files" accept=".jpg, .jpeg, .png, .heic, .mp4, .mov, .mkv" class="hidden" multiple="">
</form>

Here is the complete stack trace: (The lines in vendor.js correspond to jQuery)

10:45:28.515 jquery.fancy-fileupload.js:14 Uncaught TypeError: Cannot read property 'replace' of undefined
    at EscapeHTML (http://localhost:8080/js/vendor/fancy-file-uploader/jquery.fancy-fileupload.js:14:14)
    at UploadFailed (http://localhost:8080/js/vendor/fancy-file-uploader/jquery.fancy-fileupload.js:422:134)
    at HTMLInputElement.UploadDone (http://localhost:8080/js/vendor/fancy-file-uploader/jquery.fancy-fileupload.js:443:5)
    at $.(anonymous function).(anonymous function)._trigger (http://localhost:8080/js/vendor/fancy-file-uploader/jquery.ui.widget.js:527:13)
    at $.(anonymous function).(anonymous function)._onDone (http://localhost:8080/js/vendor/fancy-file-uploader/jquery.fileupload.js:862:18)
    at $.(anonymous function).(anonymous function)._onDone (http://localhost:8080/js/vendor/fancy-file-uploader/jquery.ui.widget.js:127:25)
    at jQuery.fn.init.<anonymous> (http://localhost:8080/js/vendor/fancy-file-uploader/jquery.fileupload.js:908:30)
    at fire (http://localhost:8080/js/vendor.js:4087:31)
    at Object.fireWith [as resolveWith] (http://localhost:8080/js/vendor.js:4217:7)
    at done (http://localhost:8080/js/vendor.js:10042:14)
EscapeHTML @ jquery.fancy-fileupload.js:14
UploadFailed @ jquery.fancy-fileupload.js:422
UploadDone @ jquery.fancy-fileupload.js:443
_trigger @ jquery.ui.widget.js:527
_onDone @ jquery.fileupload.js:862
(anonymous) @ jquery.ui.widget.js:127
(anonymous) @ jquery.fileupload.js:908
fire @ vendor.js:4087
fireWith @ vendor.js:4217
done @ vendor.js:10042
(anonymous) @ vendor.js:10284

[cubiclesoft]

Is the server responding with valid JSON? Since you are using chunked uploads, failure responses are delayed until the next request cycle due to how the underlying library works. So if it is failing on the last chunk but the server sent 'success' of false but didn't include either 'error' or 'errorcode', then that exception could trigger.

If you could do a console.log(data); line at the start of the UploadFailed() function, that should help track down the problem. data.ff_info.lastresult and data.result are the two relevant bits of information.

[s1rc]

A request is never made to a valid URL, but the endpoint would return valid JSON.

If I use the HTML above I get the stack trace posted.

If I don't use the form tags or use params: {action: 'URL'} in the config with the desired endpoint, it attempts to upload to the current page and not to the URL specified.

[s1rc]

If I set url to media/upload, it attempts to make a connection to http://localhost:8080/product/4/media/upload, which does not exist.

If I set url to /media/upload or http://localhost:8080/media/upload I get the Uncaught TypeError: Cannot read property 'replace' of undefined error.

[cubiclesoft]

params: { 'action': 'somevaluehere' } is the data to send with the form. It's not for a URL. I use 'action' as a PHP $_REQUEST variable in my other software. I didn't realize that would be a source of confusion with form 'action's until now. They are two separate, unrelated things. Sorry for the confusion.

The stack trace you posted indicates that the server is successfully responding to the request. However, since chunked uploads are in use, the data coming back is invalid (somehow). If you could do a console.log(data); line at the start of the UploadFailed() function, that should help track down the problem. data.ff_info.lastresult and data.result are the two relevant bits of information.

[s1rc]

I understand now. I am using a Laravel package for chunked uploads, and it was setup for blueimp/jQuery-File-Upload. If I manually override the response below it works:

{
    "success" : true
}

Do I have to use your "fancy_file_uploader_helper.php"? Or will it work with the same server side implementation that works for blueimp/jQuery-File-Upload?

[s1rc]

What response is expected after a successful chunk upload?

[cubiclesoft]

For a discussion of blueimp's class, see issue https://github.com/cubiclesoft/jquery-fancyfileuploader/issues/2

The response from a successful chunk upload should be the same.

You don't have to use the helper class but you'll probably find it useful for solving common tasks. It is, as evidenced by its name, helpful for processing user input from Fancy File Uploader but it isn't required.

[ShinTF]

If someone need my resolve. Same error in Laravel 5.4 Got the following: js $('#uploader').FancyFileUpload({ url : '/uploader/files', maxfilesize : 4000000 });

html

<input id="uploader" type="file" name="files" accept=".jpg, .png, image/jpeg, image/png, .doc, .docx, .pdf" multiple>

Getting fail response - current URL plus [object%20HTMLInputElement].

So, changed my html to:

And this was solution.

Endpoint response returns

{"success" : true}

[Ramees-Raja]

I have also the error [object%20HTMLInputElement] while trying to change the url, I replaced all js files with the latest release of the fancy uploader plugin, and issue solved for me.