Some files already live on the web. Why should your users download them to their device just to upload them again to your site? If a file can be accessed via public-facing URL, you can pull it in to your Filestack app directly by referencing that URL. More specifically, your users can do this on your site, and you don’t have to build a thing to get these images in to your app.
Filestack’s File Picker includes the option to allow the user to import a file by URL, but you can also reach out and grab one from your front end page if you’re so inclined. Here’s how.
Importing Files by URL in the File Picker
Let’s start with a plain and simple HTML page with the Filestack Picker:
To present the File Picker to your users, just import the JavaScript in your HTML page <head>:
<script src="https://static.filestackapi.com/filestack-js/1.x.x/filestack.min.js"></script>
…and then configure any options you want as you invoke it on your page. For more information on dropping in the pre-built picker, see my recipe to Upload Files from a Simple HTML Page. TL;DR: you don’t have to build anything, and the upload by URL feature is included out of the box like this basic html file upload tutorial.
Instead of picking a file from your hard drive or a social media or cloud storage service, your web users simply choose the “Link (URL)” option:
This is not creating a link to that image; it’s a true import. The image is copied in to your Filestack app (the one for which you have provided an APIKEY), and propagates worldwide to CDN endpoints close to your users for lightning fast downloads.
In fact, two files are being stored to my Filestack app in the example Gif above: one is the original, and the other is a copy of the cropped version of that image that I modified during import.
Great! Simple, effective, easy to implement. But what if you want to upload images by URL from your front end JavaScript, outside of the context of the picker? Read on.
Importing Files by URL from JavaScript on the Front End
While the File Picker is a simple solution to a complex problem, sometimes your page or web app needs a deeper layer of magic. Here’s a simple recipe for uploading a file by a public facing URL without using the picker, making a direct call in JavaScript in your front end code.
First, we still need Filestack’s JS on our page. That’s the same tag as before, in the same place as before (in the document’s <head>).
<script src="https://static.filestackapi.com/filestack-js/1.x.x/filestack.min.js"></script>
Also the same as before, we’ll be creating our own <script> block. What’s different now is that we’re not creating a picker. Instead, we’re working with the client object’s storeURL method, documented here: https://filestack.github.io/filestack-js/classes/client.html#storeurl
<script> var client = filestack.init('MyApiKeyHere'); var imgurl = 'https://c1.staticflickr.com/4/3258/2673143903_db2690e28f_b.jpg'; client.storeURL( imgurl ).then( res => console.log(res) ); </script>
We’re still passing our APIKEY in as we init, and the result is a client object we can work with. I’m creating a variable to hold the URL, but you could just pass it in as the first argument to the function directly. We call client’s storeURL method, passing in the URL, and because it returns a promise we’re chaining .then to receive the result and then log it to the console. That fat arrow is a shorthand version of creating an anonymous function like this:
client.storeURL( imgurl ).then( function(res){ console.log(res); } );
You’re done! Well, you’re done importing the file. Unless you store the file handles your uploads are being assigned, you’re just successfully uploading the files and walking away from them forever.
I have no idea how your app works, what it does, or who your users are, and that’s none of my business. It’s up to you to associate which user ID (if that’s what your app is working with) goes with which file handle(s). These associations between users and content are something that you store in your database, k/v store, or whatever persistence tool you choose.
David Liedle is Filestack’s Chief Evangelist. He works remotely in New York City with his wife and son, and their kitty. See more at https://DavidCanHelp.me/
Read More →