yes but i think that might be the easiest way currently! Why wouldnt you want to use make? I might be able to come up with a better solution for your needs
https://tryflowdrive.com/ is also an option, Manuel Ogomigo will have to explain how it could work for your use case!
the code should be in the body of your page this is a sample code, although might depends on how your page is structured.
<script> document.addEventListener('DOMContentLoaded', () => { // Get the elements const uploadLabel = document.querySelector('.w-file-upload-label'); const fileInput = document.querySelector('.w-file-upload-input'); const dragArea = document.querySelector('.w-file-upload-default'); // Prevent default behavior for dragover and drop dragArea.addEventListener('dragover', (e) => { e.preventDefault(); dragArea.classList.add('drag-over'); // Optional: Add class for styling during drag }); dragArea.addEventListener('dragleave', () => { dragArea.classList.remove('drag-over'); // Remove class when drag leaves the area }); dragArea.addEventListener('drop', (e) => { e.preventDefault(); dragArea.classList.remove('drag-over'); // Remove the class after drop const files = e.dataTransfer.files; // Get the dropped files if (files.length === 1) { // Check if exactly one file is dropped const file = files[0]; // Get the first file fileInput.files = files; // Set the file to the input element // Trigger the input change event manually to update the UI const event = new Event('change'); fileInput.dispatchEvent(event); } else { alert("Please drop only one file."); // Show an alert if more than one file is dropped } }); });</script>
Yeah just add an input and hide it, give it a memberstack attributes to the field.
Then use one to hr attributes to target that I put and when saved it will be added to memberstack
So there are just 2 attributes.You can add more.
Add a div to your form and add the attribute, fd-upload: default and fd-input: (for this you can target that memberstack input field in the form) eg data-ms-member: user_resume
uch, okay, I see that its super problematic what I'm dealing with. I will try to explain my situation, and can you let me know if it's possible of what I'm trying to achieve?
We have this thing called Monke IQ on our website. Basically its the collected user information storage. We collect information about the person from onboarding. All that information sits in Memberstack custom fields. Now we want to collect some files from users (like images and pdf's), and we also want to store those files in Memberstack fields.
What should I use? Make.com? Because as I saw in the memberscript 38, its possible to get the file, but is it possible to connect it to Memberstack custom field?
Is it's possible of what I'm trying to achieve and if yes - how?
Hey Karolis Vaiginis, if you are uploading the files to a storage and have the link, you could create a custom field in Memberstack to populate the file link instead of the file. Does that work for your use-case?
Yes, you can store user generated file information in custom fields as long as they are stored in plain text format, like URLs as my colleague AJ says. You can store this urls either custom fields or in MemberJSON. So the algorithm to do it would be as follows
Set a form with a file input in your site that would receive one or many files from the user
When submitting this form, the information should be sent to Make (preferably via a custom webhook) and in there you can connect to the module of your choice to process the file data (Google Drive, Cloudinary, AWS S3, etc) to obtain the URL of the newly hosted file.
You could insert this returned URL either in your custom fields using another Make scenario or via Javascript if you are confortable using custom code in the frontend.
Ah, I saw that you were trying to not use Make in your post above. We recommend using Make because you need to use something in between your frontend and the host service to process the data. Make would act as a server for that. It doesn't have to be Make, just something that allows you to conceal the secret keys of the service that you're using so you don't get hacked. Zapier is another alternative, Wized is too.
There are many solutions to solve only one problem. Hopefully this clears some of your doubts.
Comments
18 comments
yes but i think that might be the easiest way currently! Why wouldnt you want to use make? I might be able to come up with a better solution for your needs
https://tryflowdrive.com/ is also an option, Manuel Ogomigo will have to explain how it could work for your use case!
Absolutely!
You can do that with flowdrive, using just 2 attributes.
Add a div with the attributes to your form, and it's all set.
Files can be uploaded and sent to your dashboard, and you can use the link to send to memberstack, webflow, make etc on submit
Thank you Julian once again
okay, we actually got the Webflow plan that lets us upload files, but then maybe someone knows how to transform it into drag and drop?
Webflow uploads works great if you plan to upload only less than 10mb.
you'll use custom js.
That's pretty much it
let me see if I can send a sample script that you could start with
I'm not really much of a programmer. Should I create an embed next to the upload button or the code should be written in page settings
or tag?cool! This works!
is it possible to let people upload more than 1 file?
is it possible to store uploaded files in memberstack Custom fields?
no possible with webflow upload
sorry about that, if you have time check out flowdrive might be a good solution a different project or this one : )
is it possible to store uploaded files in memberstack Custom fields?
Yeah just add an input and hide it, give it a memberstack attributes to the field.
Then use one to hr attributes to target that I put and when saved it will be added to memberstack
How can I check if the file is uploaded in webflow?
from either the input in the webflow field, when successful, or intersecting it's upload api, and get it from it
uch, okay, I see that its super problematic what I'm dealing with. I will try to explain my situation, and can you let me know if it's possible of what I'm trying to achieve?
Yeah sure go ahead
We have this thing called Monke IQ on our website. Basically its the collected user information storage. We collect information about the person from onboarding. All that information sits in Memberstack custom fields. Now we want to collect some files from users (like images and pdf's), and we also want to store those files in Memberstack fields.
What should I use? Make.com? Because as I saw in the memberscript 38, its possible to get the file, but is it possible to connect it to Memberstack custom field?
Is it's possible of what I'm trying to achieve and if yes - how?
Yeah it's possible
Hey Karolis Vaiginis, if you are uploading the files to a storage and have the link, you could create a custom field in Memberstack to populate the file link instead of the file. Does that work for your use-case?
Hi Karolis,
Yes, you can store user generated file information in custom fields as long as they are stored in plain text format, like URLs as my colleague AJ says. You can store this urls either custom fields or in MemberJSON. So the algorithm to do it would be as follows
This topic was also discussed in this thread if you want to consult additional information https://memberstack.slack.com/archives/C03DTCB24LF/p1728398238780419
Here's a tutorial that shows you how to use AWS S3 to store files, since you need to host your files somewhere https://www.memberstack.com/scripts/97-upload-files-to-s3-bucket
Ah, I saw that you were trying to not use Make in your post above. We recommend using Make because you need to use something in between your frontend and the host service to process the data. Make would act as a server for that. It doesn't have to be Make, just something that allows you to conceal the secret keys of the service that you're using so you don't get hacked. Zapier is another alternative, Wized is too.
There are many solutions to solve only one problem. Hopefully this clears some of your doubts.
Please sign in to leave a comment.