[[oktatas:web:javascript|< JavaScript]]

====== JavaScript - Fájlfeltöltés ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2022
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== FileReader konstruktor =====


==== Weblap ====

<code html>
<input type="file" accept="image/jpg, image/png" id="imageup">

<div id="imageBox"></div>
</code>

==== Script ====

<code javascript>
const imageupElem = document.querySelector('#imageup');
const imageBox = document.querySelector('#imageBox');
 
var uploadedImage = '';
 
imageupElem.addEventListener('change', () => {
    const fileReader = new FileReader();

    fileReader.addEventListener('load', () => {
        uploadedImage = fileReader.result;
        imageBox.style.backgroundImage = `url(${uploadedImage})`;
    });
    
    fileReader.readAsDataURL(imageupElem.files[0]);
});
</code>

==== Törlés ====

File típusú input elem tartalmának törlése:
<code javascript>
document.querySelector('#imageup').value = '';
</code>

===== Átadás REST API számára =====


<code javascript>

var imageupElem = document.querySelector('#imageup');
var saveButton = document.querySelector('#saveButton');
var host = 'http://localhost:8000/api/';

const saveImage = () => {
    const files = imageupElem.files;
    const formData = new FormData();
    formData.append('file', files[0]);
    let endpoint = 'imageup';
    let url = host + endpoint;
    fetch(url, {
        method: 'post',
        body: formData
    })
    .then(response => response.json())
    .then(result => {
        console.log(result);
    })
    .catch(err => {
        console.log(err);
    })
    ;
}

saveButton.addEventListener('click', () => {
    saveImage();
})
</code>


===== Link =====
  * https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch (2022)