How to implement a working drag and drop file interface using memberscripts?
Hi! Is there anything about the #40 Drag and Drop Uploader that would cause it to not render properly? I'm using the #100 Compression code as well...is that what's causing #40 not to work?
Comments
12 comments
that uploader has its own built in compression but it wasn't working for me, so I tried to use that as well and didnt work either. So I got chatgpt to code the image compression for me. I just copy pasted the file pond code and asked it to add client side image compression.
if you look at the file pond docs, they have plugins. They have a plugin for transforming the image and a plugin for resizing it. You can try that route and see if you can get it working, if not I would use chatgpt. https://pqina.nl/filepond/docs/api/plugins/image-resize/
https://pqina.nl/filepond/docs/api/plugins/image-transform/
Very dope indeed, thank you!
Btw: anyone knows why the drag and drop component does not work?
What I want is to add to a form an input of drag and drop files, but when I put the script and put the component does not work.
The read-only link of the site:
https://preview.webflow.com/preview/indeephub?utm_medium=preview_link&utm_source=designer&utm_content=indeephub&preview=2ad05ffa084711b0a70a6dde73a01f15&pageId=67a125f631e6bcfa6a4eea3c&locale=en&workflow=preview
In case you want to have a drag and drop interface for file upload, you can use this memberscript along with the #40 memberscript. Currently I can see you have not implemented the linked memberscript.
In case you are not using #99 memberscript, it is safe to remove that as well.
You can test the site after implementing #38 and #40 memberscript. Let me know if you face any issues.
<link href="https://unpkg.com/filepond@^4/dist/filepond.css" rel="stylesheet" />
<script src="https://unpkg.com/filepond@^4/dist/filepond.js"> </script>
No 😔😔😔
I am not able to see any div with ms-code-file-upload-input="fileToUpload" attribute as shown in #40 memberscript tutorial. Was it intentionally removed?
The only way for the form to read the uploaded file is through the Maker webhook?
You can use Zapier if you prefer that as well. Just need to update the hook in the form accordingly.
But there should also be a div with the aforementioned attribute so that we can see the drag and drop interface in the front-end.
Yesterday I was able to generate it and the option appeared correctly.
Following this thread my intention is that the image can also auto publish in the CMS item that we are working on since yesterday.
In case you want to upload this image to a CMS item in Webflow, you can pass on the image link from google drive or any storage that you prefer to Webflow CMS collection where ideally you have an image field.
Ah good!
At this moment the users paste in the form a google drive link (public link) with the image inside, all within the same form that we have been talking about, is that enough?
Or do I have to create a new webhook?
In that logic I need some app to take the google link as a download link for the image, because taking the custom field as it is, it does not recognize the image.
If you want to upload the image to webflow cms collection item's image field, just passing the public view google drive link might not work.
The google drive view link most probably will have a file ID in its URL. So if the URL goes like 'drive.google.com/file/d/1234/view', here 1234 is the file ID. So when you want to pass the link in the image field in webflow you can try extracting the file ID from the url and pass the link in this format 'https://drive.google.com/uc?export=view&id=1234'. Replace 1234 with the actual file ID from the URL. I tested this method out and it worked on my webflow collection and an image was uploaded to the cms accurately.
Please sign in to leave a comment.