Local File Integration

All file types are supported when the source is a local device like your computer or mobile phone

Upload from your local device

Uploading or "picking" a file from your local device in the context of Filestack means choosing a file and creating a distributable link to that file. In the context of uploading local files, they are uploaded either to your cloud storage, or Filestack's and then a link is returned. This is the Filestack URL that all "Pick" functions return.

Sample Upload Code
client.pick({ fromSources: ['local_file_system'], }).then(result => { console.log(JSON.stringify(result.filesUploaded)) })

Understanding how local file uploads work with Filestack

When you use the Filestack picker to upload a file from your computer or mobile device, that file gets uploaded and stored to Filestack's servers where it will be accessible online. However, if you have configured one of our many storage options, then Filestack will deposit that file into your personal cloud storage.

Direct S3 Uploads

Filestack utilizes a multipart upload method to upload files directly from the picker client directly to S3. Files are divided into 5mb chunks which are then uploaded in parallel (many chunks at the same time). When measured against other uploading techniques and services, large files are uploaded up to 50% faster when uploaded using Filestack.

Webhooks for Your Application

Webhooks serve the purpose of notifying users about events that occur in relation to their Filestack account. In your developer portal, you can set one or many urls whose purpose is to receive the messages triggered by specific Filestack events.

These are the three event types that will send messages to your webhook url(s) concerning local file uploads:

  • Local File Uploads
  • Local File Exports
  • Local File Conversions

Configuring Webhooks

Filestack Webhooks are configured in the developer portal under Credentials > Webhooks. If you enter your url and select "All", then one entry will be made for each type of Filestack Webhook Event, including the ones from your local device. To learn more about configuring and receiving webhooks please visit our main webhooks documentation page.

Receiving a Webhook Notification

Configuring your server to receive a new webhook is the same as creating any page on your website. If you are using Sinatra, add a new route with the desired URL. In PHP you could create a new .php file on your server. It doesn't need to be complicated. With webhooks, your server is the server receiving the request. You can even use an external service such as RequestBin as shown in the screenshot above.

Webhook data is sent as JSON in the request's body. The full event details are included and can be used directly. The "action" in the JSON is the type of Filestack event that happened, be it a file being uploaded, or simply the Filestack dialog opening.

Filestack will retry sending a webhook 3 times if the first attempt fails. The second attempt to deliver a webhook happens 5 minutes after the first attempt, the third attempt happens after 1 hour, and the final attempt to deliver a webhook happens 12 hours after the first attempt.

Note that for file uploads, both symlinks and files copied with pickAndStore, the "client" field shows the service used.

For conversions, the "provider" shows where the file resides. If the file was stored to Filestack's storage, the provider will be "internal", otherwise it could be "amazon" if the original was stored to S3, or one of the cloud drives Filestack connects to, such as "Facebook" if the link to the file was a symlink.

The following are examples of what the local file specific webhook messages include and look like:

  1. File Upload (symlink):

  2. {
       "action":"fp.upload",
       "timestamp":1443444905,
       "id":100946,
       "text":{
          "url":"https://www.filestackapi.com/api/file/WAunDTTqQfCNWwUUyf6n",
          "client":"amazon",
          "type":"image/jpeg",
          "filename":"1579337399020824.jpg",
          "size":139154
       }
    }

  3. File Upload (with store):

  4. {
       "action":"fp.upload",
       "timestamp":1443515345,
       "id":105258,
       "text":{
          "container":"kg_bucket",
          "url":"https://www.filestackapi.com/api/file/0CpUz9H4QfaX7LwwsgUf",
          "filename":"Cat_crying_Lolcat.jpg",
          "client":"amazon",
          "key":"EqACdfNRmylz2h1SSYwT_Cat_crying_Lolcat.jpg",
          "type":"image/jpeg",
          "size":205354
       }
    }

  5. File Export (save to):

  6. {
      "action": "fp.export",
      "timestamp": 1444257665,
      "id": 142447,
      "text":{
        "source": "https://www.filestackapi.com/api/file/qHi4LxRh28IeEBdJcFpw",
        "client": "amazon",
        "filename": "newFiletest.jpg",
        "created": "https://www.filestackapi.com/api/file/s40jJOQDGVr2T86cgOAe"
      }
    }
            

  7. File Conversion:

  8. {
       "action":"fp.converse",
       "timestamp":1435586806,
       "text":{
          "url":"https://www.filestackapi.com/api/file/uydUKAcTSsWB3g5HOsB4/convert?w=102",
          "link":{
             "writeable":true,
             "mimetype":"image/jpeg",
             "handle":"uydUKAcTSsWB3g5HOsB4",
             "url":"filepicker_upload_persist/pHSrbCRqSqeR1wh8USfY_1.jpeg",
             "created_at":"2015-06-29T13:31:02.204Z",
             "provider":"amazon",
             "app_id":7876,
             "filename":"1.jpeg",
             "mongo_id":null,
             "_metadata":null,
             "access_tokens":[
    
             ],
             "is_folder":false,
             "persist":false,
             "user_id":null,
             "id":31968,
             "size":"111175"
          }
       },
       "id":109
    }