How to add a File Upload to Squarespace

by | June 10, 2020

3 Simple methods to upload files to Squarespace

While Squarespace gives you the option to access and edit the code of your website, the appeal for many is that you can build a beautiful website without ever having to do just that. 

So if you have a Squarespace website and would like to invite your visitors to upload files to you, you may find the process a bit challenging. Typically there have been two ways of collecting files through Squarespace:

Method 1 – You can add FTP

(File Transfer Protocol) which can be a bit challenging to implement if you are not an IT pro.

Method 2 – Use Squarespace Drop Box

Squarespace has its own feature called Drop Box. You can plug Drop Box in easily, but this feature limits uploads to 20MB, making it unsuitable for sharing video and other large digital media content or even collections of files.

Method 3 – Use MASV Portals

MASV provides a useful tool called Portals which provides a fast, uncapped alternative to FTP. It also happens to be super easy to install not to mention the fact that you can get started for free.

In this post, we’ll walk you through creating a MASV portal and adding it to your Squarespace site. 

Please note that you will only be able to embed a MASV portal onto your site if you are on the Squarespace Business Plan or above.

 

How to add MASV Portals to your Squarespace site

1. Sign up to MASV Portals

Create an account with MASV – we only need your name and email address to get you set up.

2. Create your Portal

Once you’ve signed up, click on the burger menu in the top left-hand corner of the dashboard, then select Portals.

wix step2

Click the button Create New Portal in the top right corner, and you’ll then see this screen:

wix step2 create

Add your own information into these fields, and note that you have the option to password protect your portal if you wish. Make the portal your own by adding your own image or logo, and by choosing an accent colour.  

If you’re not sure what any field means, take a look at our guide to creating a portal for a full breakdown. 

Once you’re done, hit Create Portal.

3. Create an embed link for your Portal

You’ll now see your new portal listed on your dashboard like so:

wix step3 geturl

Now we’ll generate an embed link to copy across to your Squarespace site. Click on the <> button, and you’ll see this screen:

wix step3 embed
Squarespace File Upload made easy with MASV

We have a detailed breakdown of what each of those fields means, but selecting or deselecting these fields basically affects how much information anyone uploading files to your portal will be required to input. In this example, we’ll select both options to keep the portal looking minimal.

This is the first time you’ll see a preview of how your portal will display. You can easily click out of this window and back into Edit if you spot some changes to be made. 

Once you’re good to go, hit Copy. This will copy the link beginning ‘<iframe…’. We’ll now move across to Squarespace to add the portal to your site using this link. If you want to change these fields in the future, just make sure you recopy the link over.

4. Add a Code Block to your Squarespace page

Log in to the backend of your Squarespace site and go to the page you’d like to add your MASV portal to.

sqaurespace step4 codeblock

In this example we’ll add one to the homepage, which shows up first by default. To reach any other page on your site, click Pages on the left hand side, and then select your page of choice

sqaurespace step4 pages

Once you’re on the page you’d like to add the portal to, click EDIT in the top left hand corner. 

Of course, you can also start a fresh new page to house your portal. If that’s your preferred choice, hit the + next to Main Navigation and get started with a Blank Page, or pick another suggested layout.  

sqaurespace step4 edit

Whichever page you choose to add your portal to, we recommend you add it to a blank new section. Scroll down to where you’d like the portal to sit and click on one of the section breaker + symbols:

sqaurespace step4 blanksection

This will produce the menu shown below. Select Add Blank +.

sqaurespace step4 code

Once you have your new blank section, click one of the black insert points and select Code, which is filed under More.

sqaurespace step4 codemore

5. Adjust the size and position of your portal

You should have the link already copied from your MASV dashboard. Clear the placeholder content <p>Hello, World</p>, and paste the link here. Leave the option Display Source unchecked, then hit Apply.

sqaurespace step5 source

You should now see your portal embedded in your site page, and it will look something like this:

sqaurespace step5 result

6. Adjust the look and formatting of your portal

Now it’s time to adjust the look and position of your embedded portal. 

We’ve left this one uncustomized, but at this point, you might want to go back into your MASV Portals dashboard and play around with adding your own custom image/logo and colour if you haven’t already. To do this, click the pen-shaped Edit button next to the name of your portal to make these edits, then recopy the link and paste it over the original one on your Squarespace site. 

To adjust the size and position of this code, you’ll need to go in and make manual edits to the link on your Squarespace site. But don’t worry, this is super simple.

MASV portals will left-align on your Squarespace site by default when added to a blank section. To center align your portal, add <center> to the start of the link, and then </center> right at the end of the link. Note that Squarespace will try to predict where you want to add the closing tag (</center>), and will probably add it in straight after the opening tag (<center>). Make sure to take this out and add it to the end instead. 

Portals are automatically set to be 400px wide and 640px high, but again you can edit these measurements easily within the link itself. Find the part that says width=’400’ height=’640’ and adjust these numbers  to find your ideal size.

Once you’re happy with the formatting, don’t forget to go to Done in the top left corner, and then hit Save to update the live version of your site. 

And that’s it! Your portal is now live and waiting for its first upload. Remember you can always head back to your MASV Portals dashboard to make any changes to your site, and you’ll be notified when any content is uploaded at the email address you entered in the Recipient field. 

Try MASV for Free

Start your 7-day trial and send 100GB for free right now.

MASV now works with your favourite apps

Integrations To Help You Streamline Your File Transfer Workflow.

apps

Squarespace File Upload made easy with MASV