Editing article

Title

Summary

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.<h3>Enter Filestack</h3>After spending more time than I should have trying to wrap my head around S3, one of my classmates clued me in to <a href="https://github.com/filestack/filestack-react">Filestack</a> (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 <a href="https://www.filestack.com/">filestack.com</a> 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<pre>yarn add filestack-react filestack-js</pre><pre>or</pre><pre>npm install filestack-react filestack-js</pre>Once you’ve got the necessary packages installed, import Filestack into the component(s) you’ll be adding it to with<pre>import ReactFilestack from &#39;filestack-react&#39;</pre>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:<pre>&lt;ReactFilestack apikey={keys.filestackKey} buttonText=&quot;Upload Photo&quot; buttonClass=&quot;ui medium button gray&quot; options={basicOptions} onSuccess={this.onSuccess} onError={this.onError} /&gt;</pre>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:<pre>onSuccess = (result) =&gt; { this.setState({ url: result.filesUploaded[0].url }) }</pre><pre>onError = (error) =&gt; { console.error(&#39;error&#39;, error); }</pre>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:<pre>const basicOptions = { accept: &#39;image/*&#39;, fromSources: [&#39;local_file_system&#39;], maxSize: 1024 * 1024, maxFiles: 1, }</pre>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.<img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=ba80455d2aa7" width="1" height="1" alt="">

Author

Link

Published date

Image url

Feed url

Guid

Hidden blurb

--- !ruby/object:Feedjira::Parser::RSSEntry
published: 2018-03-20 17:27:56.000000000 Z
carlessian_info:
 news_filer_version: 2
 newspaper: Kevin Randles on Medium
 macro_region: Technology
entry_id: !ruby/object:Feedjira::Parser::GloballyUniqueIdentifier
 is_perma_link: 'false'
 guid: https://medium.com/p/ba80455d2aa7
title: Painless File Upload And Hosting With Filestack-React
categories:
- flatiron-school
- react
- javascript
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.<h3>Enter Filestack</h3>After
 spending more time than I should have trying to wrap my head around S3, one of my
 classmates clued me in to <a href="https://github.com/filestack/filestack-react">Filestack</a>
 (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 <a href="https://www.filestack.com/">filestack.com</a>
 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<pre>yarn add filestack-react
 filestack-js</pre><pre>or</pre><pre>npm install filestack-react filestack-js</pre>Once
 you’ve got the necessary packages installed, import Filestack into the component(s)
 you’ll be adding it to with<pre>import ReactFilestack from &#39;filestack-react&#39;</pre>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:<pre>&lt;ReactFilestack apikey={keys.filestackKey} buttonText=&quot;Upload
 Photo&quot; buttonClass=&quot;ui medium button gray&quot; options={basicOptions} onSuccess={this.onSuccess} onError={this.onError} /&gt;</pre>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:<pre>onSuccess = (result)
 =&gt; { this.setState({ url: result.filesUploaded[0].url }) }</pre><pre>onError
 = (error) =&gt; { console.error(&#39;error&#39;, error); }</pre>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:<pre>const basicOptions = { accept:
 &#39;image/*&#39;, fromSources: [&#39;local_file_system&#39;], maxSize:
 1024 * 1024, maxFiles: 1, }</pre>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.<img
 src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=ba80455d2aa7"
 width="1" height="1" alt="">'
rss_fields:
- title
- url
- author
- categories
- published
- entry_id
- content
url: https://medium.com/@krandles/painless-file-upload-and-hosting-with-filestack-react-ba80455d2aa7?source=rss-d451d084d34a------2
author: Kevin Randles

Language

Active

Ricc internal notes

Ricc source

Show this article Back to articles