Hello,
I’ve been working with the Dropbox module in order to integrate a few functions into a dashboard page on my site. I’ve successfully gotten it to list files in a folder, but I’m not able to upload files. The difficulty comes when I try to pass a file object to the back-end.
First, to get the file object, I’m using HTML messaging since it doesn’t seem to be natively supported in WiX for some reason (if there’s an easier way, please let me know). For this implementation, I have an HTML element with a file input button. The site page has a button which sends a message to the HTML element when clicked. When the HTML element receives the message, it responds with the uploaded file. Upon receiving the response, the site page then calls the Dropbox upload function from the back-end, passing the file along. It should be noted that
console.log('Front-end: ' + MY_FILE)
correctly returns ‘Front-end: [object File]’ at this point.
The problem now is that the back-end does not receive the same object. If the first line of my Dropbox upload function is
console.log('Back-end: ' + MY_FILE)
I instead get the output ‘Back-end: [object Object]’. As a result, any files uploaded to my Dropbox from the rest of the function are simple 15-byte files containing the string ‘[object Object]’.
I’ve been able to get this to work in Preview mode by putting the Dropbox commands in my front-end rather than the back-end, and everything went smoothly, so I don’t think it’s the implementation of the Dropbox API. However, that approach doesn’t work on a published website. As far as I can tell, it seems to be a problem with file objects in Wix. I know that WiX does not support hosting files, but I’m not looking for it to do so. All I’m looking for is that it’s able to pass on these objects. Is there some package to import that would allow WiX to handle these properly in the back-end?
Thanks in advance!
Did you manage to resolve this and pass a file object?
if you convert the file to DataURI, which is a string, you will be able to pass the file to the backend, however, the size of a string is limited.
Hey, did you manage to solve this? Need this solution badly as well.
For the time being, I’ve found a “ugly” solution, I’ve converted the file on the wix page to string (dataURI) and divided the file to chunks of around 200Kb, pass it to the backend in several calls (in parallel), save it to a collection and then upload it to Google Storage after I merged it - it works.
However, I’m going to check it again soon and try to find a better solution.
I think you need to get an upload url from dropbox (which is a temporary location you can upload the file to) and use XHR to upload the file and then either make the file url private or copy it to a private area, if you do not want to make your files public.
I’m going to do the same with Google storage, I can keep you posted if u like.
@guy-tadmor Thanks for your response and yea please keep me posted. I’ve tried fetching to dropbox’s URL to upload and it works fine for files under 150mb. But above that, dropbox requires you to fetch to a different URL to start and upload session in chunks as well and I’ve failed miserably with no logs to lead me on. On your ‘ugly’ solution, how exactly do you convert the files to dataURI?
in the iframe I read the file and then send it to the wix page:
< label class = “custom-file-upload” >
< input type = “file” accept = ‘pdf/*’ onchange = ’ openFile ( event )’ />
Select File
</ label >
< script >
var openFile = function ( event ) {
var input = event . target ;
var msg = { fileName: “” , content: “” };
var reader = new FileReader ();
reader . onloadend = function (){
var buffer = reader . result ;
msg . fileName = fileName ;
msg . content = buffer ;
window . parent . postMessage ( msg , “*” );
};
var fileName = input . files [ 0 ]. name ;
reader . readAsDataURL ( input . files [ 0 ]);
};
</ script >
@guy-tadmor thank you so much. I’ll give this a go.
@woshiidaryl
Could you solve it?
Hi Guy, running into similar problems here. Did you ever find a more “elegant” solution?
Yes, it does not involves Wix backend. I use GCP with signed URL. I’ve added an iframe on the page which uploads the file directly to GCP.