How to upload an image from a URL in React Next.js to Strapi

Questions and Answers
2

This is interesting, I haven’t tried it yet, but I think it will be cool to have that as a feature in the app that I am currently building. Here is something I found when researching, maybe it can help.

I think this can help with the first part of getting the image from url

I am putting all of this here, so I can use this as notes too.

But going to try to create react component that gets image from url, shows preview, and allows you to uploaded to strapi.

I think this is a cool idea.

If you get it working ( before me ) in NextJS let us know how you did.

I started to work on this basic implementation, it is not done, yet. But you can mess around with it to see if you can take it the rest of the way.

import { useState } from 'react'

export default function GetUrlImage() {
  const [url, setUrl] = useState('https://upload.wikimedia.org/wikipedia/en/6/6b/Hello_Web_Series_%28Wordmark%29_Logo.png')

  async function uploadImage(file) {

    const formData = new FormData();
      formData.append('file', file);
      formData.append('name', 'image.png');

    console.log(formData, "formData")

    const uploadResponse = await fetch("http://localhost:1338/api/upload/", { 
      method: 'POST',
      body: formData
    });

    const data = await uploadResponse.json()
    console.log(data)
  
  }

  function convertBlobToFile(blob, fileName){
    blob.lastModifiedDate = new Date();
    blob.name = fileName;
    return blob;
  }

  async function getImageFromURL(imageUrl) {
    
    const response = await fetch(imageUrl, {
      method: 'GET',
      headers: {}
    })

    const arrayBuffer = await response.arrayBuffer();

    console.log(arrayBuffer, "arrayBuffer")

    
    const blob = new Blob([arrayBuffer, { type: 'image/png' }]);

    const file = convertBlobToFile(blob, 'image.png')

    uploadImage(file)
    
    // const url = URL.createObjectURL(blob);
    

  }


  return (
    <div>
      <input value={url}  onChange={(e) => setUrl(e.target.value)}/>
      <button onClick={getImageFromURL}>Get Image</button>
    </div>
  )
}

Second Attempt

import { useState } from 'react'

export default function GetUrlImage() {
  const [url, setUrl] = useState('https://images.pexels.com/photos/8473212/pexels-photo-8473212.jpeg')
  const [file, setFile] = useState()
  
  async function uploadFile(file) {


    console.log(file, "shit")

    const formData = new FormData();
      formData.append('file', file);
      formData.append('name', 'testfile.png');
      formData.append('type', 'image/png');

    console.log(formData, "formData")

    const uploadResponse = await fetch("http://localhost:1338/api/upload/", { 
      method: 'POST',
      body: formData
    });

    const data = await uploadResponse.json()
    console.log(data)
  
  }


  async function getFileFromURL(imageUrl) {
    
    const response = await fetch(imageUrl, {
      method: 'GET',
      headers: {}
    })

    const blob = await response.blob();
    const file = new File([blob], 'testfile.png', { type: 'image/png' });
    setFile(file)
  }

  console.log(file, "file")
  return (
    <div>
      <input value={url}  onChange={(e) => setUrl(e.target.value)}/>
      <button onClick={getFileFromURL}>Get Image</button>
      { file && <button onClick={() => uploadFile(file)}>Upload Image</button> }
      { file && <img src={url} alt="" width={600} height={700}/> }

    </div>
  )
}

Now get this error

Content-Security-Policy: connect-src 'self' https:;img-src 'self' data: blob: https://dl.airtable.com;media-src 'self' data: blob:;default-src 'self';base-uri 'self';block-all-mixed-content;font-src 'self' https: data:;frame-ancestors 'self';object-src 'none';script-src 'self';script-src-attr 'none';style-src 'self' https: 'unsafe-inline'

Will comeback to this when have more free time, hope this helps.