emersonbrogadev/README.MD

## README.MD

      
    Raw
  

              README.MD
            
          
    new Video(); Upload de imagens com a FETCH API do JavaScript!

Vocês conhecem a FETCH API?
Nesse vídeo eu vou mostrar como fazer upload de imagem usando a FETCH API e vou usar a API do IMGUR como exemplo.
Aqui você vai aprender também como enviar headers usando a FETCH API.
➜ Participe da nossa lista de desenvolvedores
➜ Aprenda ES6
➜ Veja as dicas no instagram
➜ Assita nosso canal no Youtube
➜ Curta nossa página no facebook
➜ Não perca as atualizações no twitter
=)

  
## imgur-upload.html
<!DOCTYPE html>
<html>
<head>
  <title>Upload</title>
</head>
<body>

<h1>Upload!</h1>

<form id="upload-form" action="" method="post">
  <input type="file" name="file" id="file">
  <input type="submit" value="Upload image" name="submit">
</form>

<div id="gallery">
  <!-- images -->
</div>

<script type="text/javascript">
  const CLIENT_ID = '';

  const gallery = document.getElementById('gallery');

  const doUpload = (url, options) => {
    const promiseCallback = (resolve, reject) => {

      const getFetchJson = (response) => {
        if(!response.ok) return reject(response);
        return response.json().then(resolve);
      }

      fetch(url, options)
        .then(getFetchJson)
        .catch(reject);
    };
    return new Promise(promiseCallback);
  };

  const addImage = (url) => {
    gallery.innerHTML += `<img src="${url}" width="300" />`;
  }

  const onSuccess = (result) => {
    const { data: { link } } = result;
    addImage(link);
  };

  const uploadImage = (e) => {
    e.preventDefault();

    const file = document.getElementById('file');

    const data = new FormData();
    data.append('image', file.files[0]);

    doUpload('https://api.imgur.com/3/image', {
      method: 'POST',
      body: data,
      headers: {
        'Authorization': `Client-ID ${CLIENT_ID}`,
      }
    })
    .then(onSuccess)
    .catch(console.error);
  }

  const form = document.getElementById('upload-form');
  form.addEventListener('submit', uploadImage)
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Upload</title>
	</head>
	<body>

	<h1>Upload!</h1>

	<form id="upload-form" action="" method="post">
	<input type="file" name="file" id="file">
	<input type="submit" value="Upload image" name="submit">
	</form>

	<div id="gallery">
	<!-- images -->
	</div>

	<script type="text/javascript">
	const CLIENT_ID = '';

	const gallery = document.getElementById('gallery');

	const doUpload = (url, options) => {
	const promiseCallback = (resolve, reject) => {

	const getFetchJson = (response) => {
	if(!response.ok) return reject(response);
	return response.json().then(resolve);
	}

	fetch(url, options)
	.then(getFetchJson)
	.catch(reject);
	};
	return new Promise(promiseCallback);
	};

	const addImage = (url) => {
	gallery.innerHTML += `<img src="${url}" width="300" />`;
	}

	const onSuccess = (result) => {
	const { data: { link } } = result;
	addImage(link);
	};

	const uploadImage = (e) => {
	e.preventDefault();

	const file = document.getElementById('file');

	const data = new FormData();
	data.append('image', file.files[0]);

	doUpload('https://api.imgur.com/3/image', {
	method: 'POST',
	body: data,
	headers: {
	'Authorization': `Client-ID ${CLIENT_ID}`,
	}
	})
	.then(onSuccess)
	.catch(console.error);
	}

	const form = document.getElementById('upload-form');
	form.addEventListener('submit', uploadImage)
	</script>

	</body>
	</html>