Using Active Storage in a pure rails application is quite simple, but when we switch to the Rails API with a separate user interface (such as React application), it becomes a bit more difficult. There are many prominent articles and blogs around Active Storage in a pure rails application or using Active storage on a separate front-end. Therefore, this article will attempt a brief, comprehensive guide to setting up Active Storage in the back-end and sending data from a separate front-end that Active Storage can read.

With back-end

Install Active Storage with the command line:

Running the above command will create migration files that will create the active_storage_blobs and active_storage_attachments tables. For more details on what these tables are doing, please read the Rails documentation about Active Storage. Run the above migrations file and the tables will appear in your schema.
We now make these tables connected to the models that contain the uploaded files. This is conveniently done through the built-in has_one_attached or has_many_attached Active Storage has_one_attached depending on whether the object has one or more attachments. These methods are similar to setting up another column in the object’s table, except that it will be stored in the Active Storage tables instead of the object’s tables. Suppose we have the User model:

For controllers, as mentioned earlier, Active Storage files that are attached to an object can be considered to be another property of that object. So you only need to pass the key / value into the strong params similar to any other normal attribute, the rest of Active Storage takes care of

With front-end

Front-end can be a bit more difficult. There are a few points that you should know when sending file data to the back-end. First of all, assuming you have a form (in react or vanilla JavaScript), this form must have an input tag with type='file' order for users to be able to upload a file from their local machine. The input tag will look like this:

An important thing to note is that, in the previous example, we have identified the name as photo . With this, the first important detail to note is that to access the value of a file entry field you must use .files[0] instead of .value . With .value will return a false path, not useful. With .files[0] will return a set of information on the uploaded file, necessary data. This information becomes useful when we talk about the most important step of this process: FormData
Typically, we send the form’s data to the back-end via an object of key / value pairs, JSON.stringifying, and send them through the body of the request. However, it is not as simple as this when we work with files because they cannot be converted into strings or formatted for JSON. Therefore, instead of sending it as JSON, we send it as FormData.
If the only thing you are submitting in the form is the file, using FormData can be as simple as new FormData(formObj) where ‘formObj’ is the component of the selected form. However, if you are sending other information along with the file, such as a username (string), you can use the append method as follows:

This is essentially repeated via a ‘formObj’ with key pairs and values ​​of the inputs. Finally, the FormData object will be ready to be sent to the back-end. But wait, it still doesn’t work! The final step is necessary to ensure that the headers do not contain 'application/json ‘ because we do not send JSON (‘multipart / form-data’). Now, your back-end should be able to receive file data, attach it to newly created or updated objects, and you will see the file appear wherever you put your memory.
If you are wondering how to display, receive or send to the user interface, you can add the following code in the Serializer to point to the file location in the back-end:

Thank you for reading my lengthy article , hopefully it will help you resolve any issues with Active Storage in the Rails API.

Reference source

https://medium.com/swlh/active-storage-with-rails-api-23d6a72ed3f2