🦊 Search and File Uploads 🦊
Posted on Aug 1st, 2022
🗓️ Today’s Topics
- Implementing search in your application 🔍
- Image & file uploads: forms and requests
Example Search Request with Query Params
Remember the iTunes API? To get search results, you needed to include query params that specified the search fields and terms you wanted to use.
Here’s how you might make a request that uses query params using axios. (Note: this example depends on searchTerm and token being defined in your code.)
axios.get('https://drf-library-api.herokuapp.com/api/books',
{
params: {search: searchTerm},
headers: {Authorization: `Token ${token}` }
}
)
A note on search in React
You could also perform a search without making an AJAX request, by filtering data that you already have in React. Here are a couple of examples of how you could do that.
Example Request to Upload a File
This is an update to an existing record; notice that we are using the PATCH verb. In this case you are including the file itself as the body of the request; notice that the file is in the second position as an argument to axios.patch() as the body of the request. We are also setting specific headers required by the server to handle the binary file attachment, in addition to the Authorization header.
axios.patch(url, file, {
headers: {
Authorization: 'Token ' + token,
'Content-Type': file.type,
'Content-Disposition': `attachment; filename=${file.name}`
}
}).then(res => console.log(res.data))
NOTE: If you Google how to include a file attachment in an ajax request, you’ll see a lot of references to using the FormData object. You can do it that way, but you don’t have to; the above method will work just fine as long as you know how to access the file that is being uploaded by the user. If you do want to use FormData, please discuss with your back end devs, as they will need to make sure that they can parse that content.
Here’s info about using FormData objects if you want to know more about that.
See the resources below for more information about using a file input element and accessing a selected file. The useRef() hook will be helpful to get the files from the input element after a user has selected a file using the form.