kartik-v / bootstrap-fileinput

An enhanced HTML 5 file input for Bootstrap 5.x/4.x./3.x with file preview, multiple selection, and more features.
http://plugins.krajee.com/file-input
Other
5.36k stars 2.4k forks source link

Raw data mode. is it possible? (dropbox upload problem) #1848

Open abolabo opened 10 months ago

abolabo commented 10 months ago

Hi. Your plugin is great. Thank you your good work.

I got a problem with uploading files on dropbox via ajax. I had changed http-headers with 'filepreajax', added bearer token and some custom header of dropbox

plugin.ajaxSettings =
                    {
                        headers: {
                            'Authorization': "Bearer **********************************",
                            'Content-Type': 'application/octet-stream',
                            'Dropbox-API-Arg': JSON.stringify({
                                path: fileUploadPath,
                                mode: 'add',
                                autorename: true,
                                mute: false
                            })
                        }
                    };

Problem is in data on dropbox side. If i send jpeg file it cannot be previewed on their side. Content of file is


-----------------------------188311213513021448531462969784
Content-Disposition: form-data; name="order_files"; filename="tiger-invert.jpg"
Content-Type: image/jpeg

\FF\D8\FF\E0\00JFIF\00\00H\00H\00\00\FF\E1-\9AExif\00\00II*\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00b\00\00\00\00\00\00\00j\00\00\00(\00\00\00\00\00\00\001\00
\00\00\00r\00\00\002\00\00\00\00\80\00\00\00i\87\00\00\00\00\94\00\00\00\A6\00\00\00H\00\00\00\00\00\00H\00\00\00\00\00\00GIMP 2.10.30\00\002022:07:11 11:34:24\00\00\A0\00\00\00\00\00\00\00\00\00\00\00   \00\FE\00\00\00\00\00\00\00\00\00\00\00\00\00\FA\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00\00t,\00\00\00\00\00\00\00\00\00\FF\D...

As you see plugin adds headers as content.

Is there way to set "raw"-mode for sending file via ajax?

Dropbox documentation suggest do this

        xhr.open('POST', 'https://content.dropboxapi.com/2/files/upload');
        xhr.setRequestHeader('Authorization', 'Bearer ************');
        xhr.setRequestHeader('Content-Type', 'application/octet-stream');
        xhr.setRequestHeader('Dropbox-API-Arg', JSON.stringify({
            path: '/111/' + file.name,
            mode: 'add',
            autorename: true,
            mute: false
        }));
        xhr.send(file);

where file is an file object.

kartik-v commented 5 months ago

Recommend - for such cases - you should write an intermediate middleware web server API that reads the standard FILE upload request from this plugin (just like how you would from a HTML native file input) and then from the middleware call the custom dropbox API to transform/ upload files to the cloud with the necessary settings, file conversions and the necessary access authorizations. It maybe difficult to standardize this at plugin level as to what is needed by which cloud upload vendor. Open to suggestions though if anything else can be done.