Hello,
I’m trying to upload an image but it doesn’t go directly into the modal or into the portfolio. I would like that when I upload an image it is directly and automatically put in the portfolio and modal without reloading the page. Does anyone have an idea how to do this because I don’t see it ? Here is my code, thanks for your help
/* Send the image to server */
let image;
const submitButton = document.querySelector("#submit-button");
const titleInput = document.querySelector("#title");
const categorySelect = document.querySelector("#category");
const background = document.querySelector(".background");
const img = document.createElement("img");
submitButton.addEventListener("click", function(event) {
event.preventDefault();
const title = titleInput.value;
const category = categorySelect.value;
console.log(image);
if (!image) {
document.getElementById("errorMessage").innerHTML = "Une image est requise";
return;
}
if (!title) {
document.getElementById("errorMessage").innerHTML = "Un titre est requis";
return;
}
if (!category) {
document.getElementById("errorMessage").innerHTML = "Une catégorie est obligatoire";
}
const formData = new FormData();
formData.append("title", title);
formData.append("category", category);
formData.append("image", image);
fetch("http://localhost:5678/api/works", {
method: "POST",
headers: {
"accept": "application/json",
"Authorization": `Bearer ${token}`
},
body: formData
})
.then(function (response) {
submitButton.style.backgroundColor = "#1D6154";
return response.json();
})
.catch (function (error) {
console.error(error);
submitButton.style.backgroundColor = "#A7A7A7";
});
});
/* upload an image */
let imgSrc;
document.querySelector(".add-photo").addEventListener("click", function() {
const input = document.createElement("input");
input.type = "file";
input.accept = "image/jpg, image/png";
input.click();
/* Check the file type and size */
input.addEventListener("change", async function() {
image = input.files[0];
if (image.type !== "image/jpg" && image.type !== "image/png") {
document.getElementById("errorMessage").innerHTML = "jpg ou png obligatoire";
return;
}
if (image.size > 4 * 1024 *1024) {
document.getElementById("errorMessage").innerHTML = "4mo maximum";
return;
}
/* Replace by image loaded, the default message jpg png 4mo max */
background.innerHTML = "";
const reader = new FileReader();
reader.readAsDataURL(image);
reader.onload = function() {
img.src = reader.result;
imgSrc = reader.result;
img.style.width = "30%";
background.appendChild(img);
}
}
);
});
/* take categories from API in loading new image*/
async function getCategories() {
const response = await fetch("http://localhost:5678/api/categories");
const categories = await response.json();
const select = document.querySelector("#category");
for (let i = 0; i < categories.length; i++) {
let option = document.createElement("option");
option.value = categories[i].id;
option.innerHTML = categories[i].name;
select.appendChild(option);
}
}
getCategories();
Here is the link of the github : https://github.com/mjandia/architecte/tree/main
and the css that i have to reorganize :
* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/** end reset css**/
body {
max-width: 1140px;
margin:auto;
font-family: 'Work Sans' ;
font-size: 14px;
}
header {
display: flex;
justify-content: space-between;
margin: 80px 0
}
section {
margin: 50px 0
}
h1{
display: flex;
flex-direction: column;
font-family: 'Syne';
font-size: 22px;
font-weight: 800;
color: #B1663C
}
h1 > span {
font-family: 'Work Sans';
font-size:10px;
letter-spacing: 0.1em;
;
}
h2{
font-family: 'Syne';
font-weight: 700;
font-size: 30px;
color: #1D6154
}
nav ul {
display: flex;
align-items: center;
list-style-type: none;
}
nav li {
padding: 0 10px;
font-size: 1.2em;
}
li:hover {
color: #B1663C;
}
#introduction {
display: flex;
align-items: center;
}
#introduction figure {
flex: 1;
}
#introduction img {
display: block;
margin: auto;
width: 80%;
}
#introduction article {
flex: 1
}
#introduction h2 {
margin-bottom: 1em;
}
#introduction p {
margin-bottom: 0.5em;
}
#portfolio h2 {
text-align: center;
margin-bottom: 1em;
}
.gallery {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 20px;
grid-row-gap: 20px;
}
.gallery img {
width: 100%;
}
#contact {
width: 50%;
margin: auto;
}
#contact > * {
text-align: center;
}
#contact h2{
margin-bottom: 20px;
}
#contact form {
text-align: left;
margin-top:30px;
display: flex;
flex-direction: column;
}
#contact input {
height: 50px;
font-size: 1.2em;
border: none;
box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09);
}
#contact label {
margin: 2em 0 1em 0;
}
#contact textarea {
border: none;
box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09);
}
input[type="submit"]{
font-family: 'Syne';
font-weight: 700;
color: white;
background-color: #1D6154;
margin : 2em auto ;
width: 180px;
text-align: center;
border-radius: 60px ;
}
footer nav ul {
display: flex;
justify-content: flex-end;
margin: 2em
}
/* Login link*/
a
{
color: black;
text-decoration: none;
}
a:hover
{
color: #B1663C;;
}
/* Les boîtes modales */
* {
box-sizing: border-box;
}
.modal
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
visibility: hidden;
opacity: 0;
transition: 0.2s;
}
.modal-wrapper
{
width: 680px;
max-width: 780px;
height: 600px;
padding: 20px;
background-color: white;
overflow: auto;
flex: 1;
position: relative;
}
.modal.show
{
visibility: visible;
opacity: 1;
}
/* La fonction trier */
.btn-filter
{
border: 1px solid #1D6154;
border-radius: 60px;
width: 190px;
height: 37px;
padding: 5px;
position: relative;
left: 130px;
margin: 0 10px 30px 0;
background: white;
font-family: 'Syne';
font-size: 16px;
font-weight: 700;
line-height: 19.2px;
}
.object
{
border: 1px solid #1D6154;
border-radius: 60px;
width: 190px;
height: 37px;
padding: 5px;
position: relative;
left: 130px;
margin: 0 10px 0 0;
background: white;
font-family: 'Syne';
font-size: 16px;
font-weight: 700;
line-height: 19.2px;
}
.green
{
background: #1D6154;
color: white;
}
/* Les font awesome */
.fa-xmark
{
position: absolute;
left: 300px;
top: -30px;
cursor: pointer;
position: relative;
}
.fa-up-down-left-right
{
position: absolute;
top: 70px;
left: 80px;
background: black;
color: white;
border: 4px solid black;
visibility: hidden;
}
.trash-can-button
{
position: relative;
top: -98px;
left: 90px;
width: 20px;
background: black;
color: white;
border: 4px solid black;
}
.first
{
position: relative;
left: 50px;
}
.two
{
position: relative;
bottom: 120px;
}
.three
{
position: relative;
left: 700px;
bottom: 70px;
}
.four
{
position: relative;
left: 0px;
bottom: -25px;
color: white;
margin-right: 10px;
}
/* Les boutons Edit */
.edit
{
background-color: white;
padding: 20px 20px;
font-family: 'Work Sans';
font-weight: 400;
font-size: 14px;
line-height: 16.42px;
color: #1D6154;
border: none;
position: relative;
bottom: 120px;
width: 10px;
}
.edit1
{
background-color: white;
padding: 20px 20px;
font-family: 'Work Sans';
font-weight: 400;
font-size: 14px;
line-height: 16.42px;
color: #1D6154;
border: none;
position: relative;
left: 60px;
}
.edit2
{
background-color: white;
padding: 20px 20px;
font-family: 'Work Sans';
font-weight: 400;
font-size: 14px;
line-height: 16.42px;
color: #1D6154;
border: none;
position: relative;
bottom: 70px;
left: 700px;
width: 10px;
}
/* Log In Form */
.form
{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.input
{
display: flex;
flex-direction: column;
margin: 50px 0 0 0;
padding: 5px;
}
::placeholder
{
background: #E5E5E5;
}
label
{
margin: 5px 0 5px 0;
}
h3
{
font-family: 'Syne';
font-weight: 700;
font-size: 30px;
color: #1D6154;
}
h4
{
font-family: 'Syne';
font-size: 22px;
letter-spacing: 0.1em;
display: flex;
flex-direction: column;
color: #B1663C;
}
h4 > span {
font-family: 'Work Sans';
font-size: 16px;
font-weight: 400;
letter-spacing: 0.1em;
}
nav ol {
display: flex;
list-style-type: none;
margin: 0 20px 0 250px;
}
.instagram
{
width: 19.36px;
height: 19.36px;
}
.heading
{
display: flex;
justify-content: space-between;
}
.mention-legal li
{
display: flex;
justify-content: flex-end;
margin: 2em;
}
/* bouton de la fenêtre modale3 */
figure
{
display: inline-block;
}
figure img
{
width: 85%;
height: 85%;
object-fit: cover;
}
.delete-gallery
{
color: #D65353;
font-family: 'Syne';
font-size: 14px;
font-weight: 400;
display: flex;
justify-content: center;
align-items: center;
}
.galleryModal3
{
display: flex;
flex-wrap: wrap;
}
.galleryModal3 img
{
width: 78px;
height: 104px;
margin: 25px 35px 5px 35px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.btn-edit
{
font-family: 'Work Sans';
font-size: 12px;
font-weight: 400;
border: 0px solid transparent;
background: white;
position: relative;
left: 28px;
top: 10px;
}
.linkphoto
{
background: #1D6154;
width: 237px;
height: 36px;
font-family: 'Syne';
font-size: 14px;
font-weight: 700;
border-radius: 60px;
color: white;
padding: 10px;
text-decoration: none;
}
/* Modal 3 */
.gallery-photo
{
font-family: 'Work Sans';
font-size: 26px;
font-weight: 400;
display: flex;
justify-content: center;
align-items: center;
}
.fa-arrow-left
{
position: absolute;
left: 20px;
top: 20px;
cursor: pointer;
}
/* Modale 5 */
.background
{
width: 420px;
height: 169px;
background: #E8F1F6;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 0 5px 0;
}
.galleryModal4
{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.add-photo
{
background: #CBD6DC;
color: white;
font-family: 'Work Sans';
font-size: 14px;
font-weight: 500;
text-align: center;
width: 127px;
height: 26px;
color: #306685;
border-radius: 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 0 5px 0;
}
.photo
{
color: black;
font-family: 'Work Sans';
font-size: 26px;
font-weight: 400;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 30px 0 20px 0;
}
.wrapper
{
display: flex;
justify-content: center;
align-items: center;
}
#submit-button
{
width: 237px;
height: 36px;
border-radius: 60px;
background: #A7A7A7;
border: 1px solid #A7A7A7;
color: white;
font-family: 'Syne';
font-size: 14px;
font-weight: 700;
}
#submit-button:enabled
{
width: 237px;
height: 36px;
border-radius: 60px;
background: #1D6154;
cursor: pointer;
}
.title
{
margin: 0 380px 5px 0;
color: black;
font-family: 'Work Sans';
font-size: 14px;
font-weight: 500;
}
.category
{
margin: 0 350px 5px 0;
color: black;
font-family: 'Work Sans';
font-size: 14px;
font-weight: 500;
}
#input-title
{
width: 420px;
height: 51px;
background: #FFFFFF;
box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09);
margin: 0 0 5px 0;
}
/* formualire envoyer un fichier */
label
{
display: flex;
}
#category
{
display: flex;
width: 420px;
height: 51px;
background: #ffffff;
box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09);
border: 1px solid #ffffff;
margin-top: 5px;
color: black;
}
#title
{
display: flex;
width: 420px;
height: 51px;
background: #ffffff;
box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09);
border: 1px solid #ffffff;
margin-top: 5px;
}
#submit-button
{
width: 237px;
height: 37px;
background: #A7A7A7;
border: 1px solid #A7A7A7;
border-radius: 60px;
margin: 10px 0 0 80px;
}
form
{
display: flex;
justify-content: space-between;
flex-direction: column;
}
.fa-regular
{
color: #306685;
}
#option
{
height: 70px;
}
.background2
{
background: black;
width: 100%;
height: 59px;
display: flex;
position: absolute;
top: 0;
left: 0;
z-index: -1;
margin: -10px 0 0 0;
justify-content: center;
}
.publish
{
width: 216px;
height: 38px;
border-radius: 60px;
}
#errorMessage
{
color: red;
font-family: 'Work Sans';
font-size: 14px;
font-weight: 500;
margin-top: 20px;
}