Site icon Filestack Blog

Upload Files via Web Search

David Liedle

You can easily upload files via web search results, allowing your users to search the web for images and select the one they want; in fact, if you’re displaying the Filestack File Picker on your web page, you’re already done.

One of the built-in features of the File Picker is to provide your users with the ability to find an image on the web to upload files via web search and save them to your Filestack app. When you set up the File Picker on your HTML page, you get many features out of the box. Most of these, like uploading user Instagram photos and Google Drive files, can run without any custom code or configuration. Allowing your users to upload files from Dropbox requires a little configuration on the Dropbox side (you just need to fill out their form and get your own Dropbox App ID to comply with their requirements), but it can also run without any extra code to be written or managed by you.

The ability to search-and-upload images via web search results may be a feature that you don’t want your users to utilize, so let’s change things up a bit and give you a recipe here for how to turn something off.

Let’s take a look at how we can do that as we embed the File Picker in our HTML page.

First, we include the Filestack JavaScript code, minified of course:

<html>
 <head>
   <title>My Example Upload Page</title>
   <script src="https://static.filestackapi.com/filestack-js/1.x.x/filestack.min.js"></script>
 </head>
 <body>
   <script>
     var client = filestack.init('APIKEY').picker().open();
   </script>
 </body>
</html>

Next, as we paste the JavaScript code that invokes the picker (I’ve been saying you don’t have to write any code because technically you can just paste this; it still needs to be added to your page), we’ll focus in on the configuration options that are available to us at invocation:

    <script>
      var client = filestack.init('APIKEY').picker( { } ).open();
    </script>

Our default examples shown in the other recipes were simple, so they were not taking advantage of a detailed set of options that can be passed in to the picker() function. See those empty curly braces I’ve added in the script there? Let’s look at an example of the kinds of options that it allows you to pass in to the picker:

<script>
   var picker_options = {
       "displayMode": "inline",
       "container":   "fsuploaderdiv",
       "accept": [
           "image/*"
       ],
       "uploadInBackground": false,
       onFileUploadFinished: function(response){
           console.log(response.handle);
       }
   };
   var client = filestack.init('APIKEY').picker( picker_options ).open();
</script>

One of the options, setting displayMode to “inline”, requires that we specify the ID of the div to be used as its container. You can see that happening just below where the “container” is specified with an ID of “fsuploaderdiv”. That could be a div called “therestaurantattheendoftheuniverse” or whatever. The idea is that you’re wiring up the File Picker in a slightly different way than it would normally run by default.

All you’d need to add to your customization to turn off the web search feature that enables your site visitors to upload files via web search in the File Picker would be the fromSources option in the picker. The valid sources are documented here:

https://filestack.github.io/filestack-js/interfaces/pickeroptions.html#fromsources

The defaults are:

When you pass an array [ ] of fromSource sources (each one a string) to the picker options, you’re taking responsibility for the complete list of sources you want to use in your picker. By specifying anything in the fromSources option, you’re telling the picker to enable only those sources that you list explicitly. This means that you would need to include every single default fromSources source from which you wish to allow your users to upload files, except for the imagesearch in the picker options if you wanted to keep the default behavior minus only the ability to upload files via web search.

It doesn’t really matter how that object gets passed in to the picker. Above, you can see two different examples that I’ve given. The first is passing an empty { } object inline, but could just as easily have all of the properties within the object right there. The second just takes the extra step of assigning that object to a variable, then passing the variable in. Same thing, different approach.

If you specify only one fromSources source, the picker looks slightly different. The need for selecting multiple upload sources is gone, and so is the left side selection menu. As soon as you have two or more sources, it automagically comes back. In theory, you could recreate the default sources exactly by listing them all explicitly in the options object. This may be desirable if you want to lock in the sources your users can use to choose which files they’re uploading to your app. That way any future changes to Filestack’s defaults (none planned that I know of, just discussing the theory) would not change your implementation.

var client = filestack
  .init('REPLACE_THIS_WITH_YOUR_APIKEY')
  .picker({
    fromSources: [
      'local_file_system',
      'url',
      // 'imagesearch',
      'facebook',
      'instagram',
      'googledrive',
      'dropbox'
    ]
  })
  .open();

Of course, if you do want your users to be able to upload files via web search, all you’d have to do is un-comment that source.

I’ve created a little CodePen demonstrating this, if you’re interested in playing with it yourself. Substitute your actual APIKEY (which you can find in the Filestack Developer Portal when you log in) and it will really upload to your Filestack app. With or without a valid APIKEY, the CodePen will allow you to play with the configuration options. In my example, I’ve recreated every one of the default sources, but commented out the ‘imagesearch‘ source to disable it in the picker. Want a free APIKEY? Sign up for a 2-week trial, and ping me on the Interwebs if you have any questions!

 

P.S: Looking for guides on how to use Filestack for your tech stack? Check out these guides on how to handle a PHP file upload or AJAX file upload using Filestack.

Exit mobile version