Can You Have Users Upload an Image in a Squarespace Form

Uploader needs your donations to keep working, please use the button below

Squarespace has good forms architect, but unfortunately there is no upload field to store user files or docs. It may be useful for user images, screenshots, pdf-forms or so. Certain you lot may use some side services to organize file uploading: Wufoo, JotForm and many others. And while they have groovy builders and file uploads, sometimes you need more than than 3-5 forms or 1000 grade views per month with free account.  So nosotros decided to make a small javascript plugin, which add file upload fields to Squarespace forms and minor web-service to handle these uploads.

If storing files on our server not your Google Drive (you may connect your Google Drive) - remember that files older than 30 days may exist deleted without whatever notice. Our Server is not a storage, so delight download submitted files in these 30 days.

Adding plugin on site

And then starting time of all you need to add our plugin to page. The best option is Header Injection (if y'all want to use script globally on site) or Page Header Code Injection (if you desire to utilise it on specific pages). If you take used Page Injection for Uploader and using Ajax-enabled template - it is general known, that anything injected there will be NOT executed subsequently ajax page load. And so if someone lands on whatever page WITHOUT Uploader Injection  and jumps to one WITH volition do zilch. So please use Global Injections or you lot may disable Ajax Loading in Manner Editor and utilise Page Injection then.

Permit's add the script globally:

            <            script            src="//uploader.squarewebsites.org/sqs-form-upload.min.js"            >            </            script            >          

SquarespaceWebsites Uploader - Header Injection

Our plugin uses Simple-Ajax-Uploader, to overlap default Squarespace Forms text-fields, and so prove your love to his author.

At present we need to create usual Squarespace Form and add text field which volition become our upload button.

And then Upload field is basically just a Text Field but with specific parameters in description/placeholder and that enables Upload here. So if you do not come across Upload field in Grade builder, only create Text field and add in that location FileField; to description - this converts field to Upload ane.

 We edit these custom parameters in this field:

Description Section parameters, ";" delimiter

• add FileField parameter to enable this field as File upload field - required;

• prepare MaxSizeof filein KB, otherwise default value is 1024KB(1MB). The max file size we support at the fourth dimension is 10MB per file;

• add Multiple parameter for multiple files uploading;

• fix addText parameter to change button text, use underscore for spaces ex.  addText=Add_your_Files;

• set UploadUrl parameter to use your ain server (ex. UploadUrl=http://my-own-server.com;) or add cypher to use our own service.

• add capture parameter to enable capture support on mobile devices

Placeholder Section parameters, "," delimiter

• set the listing of allowed extensions hither to prevent users from uploading some files you don't demand. Otherwise, next list volition be used: ".jpg, .jpeg, .png, .gif, .txt". Our service supports many of document, archives and graphic extensions, but you may asking some custom if yous need.

So with all parameters you lot will go something like this:

SquarespaceWebsites Uploader - Ready Text Field Parameters

At present refresh the page and y'all volition meet the button Add together Files instead of text field - you lot may click and choose or drag-and-driblet files here.

Registering your domain

Only if you're gonna to use our service for uploads - you lot need to get to SQS Form Uploader site and register your site domain. Otherwise, you will run across such mistake when trying to upload:

Just register with e-mail and password or use Facebook or Google business relationship to sign upwardly.

SquarespaceWebsites Uploader - Sign in

Once you log in, you lot may add together Sites to your account. Name it and add at least Site Url in http://case.com format to save it. Y'all may also add Squarespace Site Url if you want to handle uploads from Squarespace built-in domains (like https://mysite.squarespace.com) too.

Attention! Y'all are free to alter Squarespace Site Url further, unless you desire to change the principal Site Url - thenyou lot need to remove electric current site clicking cerise close icon and add Site with new Site Url.

SquarespaceWebsites Uploader - Adding site

Now your site is added and users may now upload files. You will get Squarespace Class Submission email every bit usual, but now y'all volition have the unique urls of uploaded files. Note, that these urls are secure and only you will be able to download files while you are logged in.

SquarespaceWebsites Uploader - Upload Files

SquarespaceWebsites Uploader - Squarespace Form Submission

SquarespaceWebsites Uploader - Uploads Tab

If yous want, you lot may use your own Google Drive to store all uploads. Showtime you demand to click Connect GDrive push and allow SQS Grade Uploader-app offline admission. Afterwards you may see Connect GDrive button on each of your sites. Clicking this your site volition exist connected and gdrive icons appear.

SquarespaceWebsites Uploader - Connect Google Drive

SquarespaceWebsites Uploader - Site is continued to Google Bulldoze

While your site is connected to Google Bulldoze, user uploads will exist stored to SQS Form Uploader/your-site-address/folder. And y'all will go direct Google Drive links to files now.

SquarespaceWebsites Uploader - Google Bulldoze uploads

SquarespaceWebsites Uploader - Squarespace Form Submission(Google Drive)

Delight apply the form below to submit issues with Uploader

hicksgreack1997.blogspot.com

Source: https://www.squarewebsites.org/blog/squarespace-websites-uploader