"title"=>"Painless File Upload And Hosting With Filestack-React",
"summary"=>nil,
"content"=>"
One of the biggest headaches in my young career as a software developer has been figuring out the best way to allow users to upload images to a web app I was working on. My first attempt involved vanilla JS and attempting to store images directly in my back-end database…unless you absolutely need to do it this way, don’t re-invent the wheel, find another solution (we ended up uploading our files to a host and linking directly to them). Second time around, I figured “let’s try AWS S3, I see lots of sites hosting images there” — and while S3 is a perfectly valid, and probably great, solution, when you need to deliver a working site quickly, something a bit lighter in terms of configuration is called for.
Enter Filestack
After spending more time than I should have trying to wrap my head around S3, one of my classmates clued me in to Filestack (specifically, filestack-react), which couldn’t be simpler to set up — I did it far less time than it’ll take me to write this blog post. Before you get started, you’ll need to sign up for an account at filestack.com in order to get an API key. It’s free to sign up for a developer plan, which includes more than enough bandwidth and uploads to see you through the development phase of a project.
Next, assuming you’ve already got a React app you’re working on, you’ll just need to install the packages with
yarn add filestack-react filestack-js
or
npm install filestack-react filestack-js
Once you’ve got the necessary packages installed, import Filestack into the component(s) you’ll be adding it to with
import ReactFilestack from 'filestack-react'
Now we’re ready to put something on the page — the Filestack component only requires one prop , “apikey”, but it‘s not that useful without a couple more. Here’s the basic configuration I’ve been using:
<ReactFilestack
apikey={keys.filestackKey}
buttonText="Upload Photo"
buttonClass="ui medium button gray"
options={basicOptions}
onSuccess={this.onSuccess}
onError={this.onError}
/>
keys.filestackKey refers to the file I’m importing my key from — you could just put the key right there, but you know better than that, right? buttonText and buttonClass are purely cosmetic, setting the text on the button that opens the Filestack uploader, and in this case, assigning classes so the button matches the Semantic UI components I’m using for the rest of this form. onSuccess and onError should point to callback functions that will handle the response from Filestack:
onSuccess = (result) => {
this.setState({
url: result.filesUploaded[0].url
})
}onError = (error) => {
console.error('error', error);
}The onSuccess function here is just storing the URL returned from Filestack to the component’s state, which will be saved to my database when the form is submitted. onError is just sending any potential error messages to the console…handle your errors however you see fit.
Finally, the options prop takes an Object with, yep, you guessed it, options. I’ve chosen to configure it to only allow a single image file from local storage no larger than 1024x1024, which I set in a variable defined outside of the return in my form’s render method:
const basicOptions = {
accept: 'image/*',
fromSources: ['local_file_system'],
maxSize: 1024 * 1024,
maxFiles: 1,
}You can do quite a bit more with the options here, including configuring Filestack to automatically crop or resize images, specifying alternate hosting (S3, Dropbox, Azure, and more), adding watermarks, etc., but what you see here will have you up and running in just a few minutes.
"author"=>"Kevin Randles",
"link"=>"https://medium.com/@krandles/painless-file-upload-and-hosting-with-filestack-react-ba80455d2aa7?source=rss-d451d084d34a------2",
"published_date"=>Tue, 20 Mar 2018 17:27:56.000000000 UTC +00:00,
"image_url"=>nil,
"feed_url"=>"https://medium.com/@krandles/painless-file-upload-and-hosting-with-filestack-react-ba80455d2aa7?source=rss-d451d084d34a------2",
"language"=>nil,
"active"=>true,
"ricc_source"=>"feedjira::v1",
"created_at"=>Wed, 03 Apr 2024 14:31:17.353816000 UTC +00:00,
"updated_at"=>Mon, 13 May 2024 18:45:31.680030000 UTC +00:00,
"newspaper"=>"Kevin Randles on Medium",
"macro_region"=>"Technology"}