Image Uploads to Active Storage: “How to AJAX”
For my Flatiron School Phase 4 Javascript project, I sought out to create an image uploading, Single Page Application (SPA). But just how does one go about uploading an image, and how can they store it? The following is a quick guide to help you get started, utilizing Active Storage.
Simply put, Active Storage “facilitates uploading files to a cloud storage service like Amazon S3, Google Cloud Storage, or Microsoft Azure Storage and attaching those files to Active Record objects”. Additionally, files can be uploaded to your local disk, which will be our methodology here.
Step 1: Set Up Active Storage
In your terminal, run the following commands:
run rails active_storage:install
run rails db:migrate
Notice: A migration file for storing your image upload as a blob will be created
Step 2: Associate file attachment with a model:
Next we will need to define our model associations with what will become your Active Record image file, using either “has_one_attached” or “has_many_attached” macros on the model level for the appropriate model which will house the file. In this case, I have a “Post” model, which will only have one image attachment associated.
NOTE: the image blob lives on the Active Record Storage Table, therefore you will NOT need an “image” column within your “Post” table as the “has_one_attached” will make the association for us and store accordingly
Step 3: Serializer Setup
As we’ll be making use of an AJAX call dependent on converting our data to serialized JSON, we’ll need to set up our “Post” serializer accordingly to accept an image attribute. Simply call an image as an attribute, as well as the following image function, which will help us retain the image blog as a value within the JSON data:
Step 4: Create a Target and Event Listener for Form Submission
With our associations and database table in place, we can now create a Form on our index.html page which will take an input type of “file”, and the name and id associated with our “image”.
Next, create an Event Listener which takes action upon “Submit” of the aforementioned form.
Step 5: Receiving the Data in your Rails Controller
With the form and submit actions in place, we’ll now be able to grab the image upload data in the e.target[‘image’].files[0] position, generate new formData, and append the ‘image’ file to formData accordingly:
You’ll note that the“Content-Type” header is NOT included in the fetch request, as this has the effect of corrupting the request body.
For this fetch request to work, we’ll need to ensure that our Controller has both a Create method to ingest the image, ex:
post = Post.new(caption: params[:caption], hashtag: params[:hashtag], image: params[:image])
…as well as ensure that our params.require lists :image accordingly.
params.require(:post).permit(:caption, :hashtag, :image, :id)
Step 6: Retrieving Data from Active Storage
Finally, the image file itself can be displayed by calling img.src = this.image and appending a newly created const img to your page as follows:
In conclusion, while uploading files to Active Storage via AJAX can certainly have its frustrations, with the above steps in place you’ll hopefully be well on your way to image uploading mastery.
