How to make my upload pictures from vertical to horizontal?

Question

I've tried soo many ways changing the margin and other things in my css in my code but nothing works. The only thing that i am asking is where should i change the code to make my pictures orientation after I upload from vertical to horizontal.

Here is the code:

function showMyImage(fileInput) {
    var files = fileInput.files;
    for (var i = 0; i < files.length; i++) {           
        var file = files[i];
        var imageType = /image.*/;     
        if (!file.type.match(imageType)) {
            continue;
        }           
        var img=document.createElement("img");
        img.style.width = "20%";
        img.style.marginTop = "10px";
        img.alt = "image";
        img.classList.add("thumbnail");
        var reader = new FileReader();
        reader.onload = (function(aImg) { 
            return function(e) { 
                aImg.src = e.target.result; 
            }; 
        })(img);
        reader.readAsDataURL(file);
        var gallery = document.querySelector(".gallery");
        var div = document.createElement("div");
        div.style.display = "inline-block";
        div.appendChild(img);
        gallery.appendChild(div);
    }    
}

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
 output.innerHTML = this.value;
}

const buttonPrintOrSaveDocument = document.querySelector(
    ".button-print-or-save-document"
);

function printOrSave() {
    window.print();
}

buttonPrintOrSaveDocument.addEventListener("click", printOrSave);

label textarea{
        vertical-align: top;i
    }

    div { text-align: left; }



.thumbnail {
    display: block;
    margin-bottom: 10px;
}
.gallery {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.gallery > div {
    margin-right: 10px;
}
.gallery img {
  display: inline-block;
  
  object-fit: cover;
  margin: 5px;
}



.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

<h1 align="center"> DATABASE </h1>

<h3> <b>Diametri i gypit: </b> </h3>                        

<div class="slidecontainer">
  <input type="range" min="63" max="1800" value="63" class="slider" id="myRange"> 
  <h4 align="left"> fi ɸ : <span id="demo"></span> mm</h4>
</div>

<label for="lang"><b> Materiali Gypit </b> </label>
<select name="Materiali" Id="lang">
  <option value="Azbest">Azbest</option>
  <option value="GRP">GRP</option>
  <option value="Pllastik">Pllastik</option>
  <option value="Heker Cingtun">Heker Cingtun</option>
</select>

<div>
   <p> <b> Anëtarët: </b></p> <textarea rows="5" cols="20"  ></textarea>
</div>

<label>     
<p><label for="w3review" value="Fshati"> <b> Fshati: </b></label></p>
<textarea id="w3review" name="w3review" rows="2" cols="20"> </textarea>
<form action="/action_page.php">
<p><label for="w3review" value="Përshkrimi"> <b> Përshkrimi: </b> </label></p>
<textarea id="w3review" name="w3review" rows="4" cols="80"> </textarea>
<! -- Upload picture --> 

<p> <b> Ngarko foto: </b> </p>
<input type="file" accept="image/*"  onchange="showMyImage(this)" multiple id="gallery-photo-add" />
<br/>
<div class="gallery"></div>
<br/>
<img id="thumbnil"  src="your_image_url" width="300" height="200" alt="image"/>
<br>
<br>
<br>
<br>    
</br>                       
</br>
<button class="button-print-or-save-document">Ruaj</button>

If anyone could help me I'd appreciate that.

You mean [rotate with CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate)? — Peter Krebs, May 08 '23 at 07:18
Yes sir. Somehow i can align them side by side. I have watched this : "https://www.w3schools.com/howto/howto_css_images_side_by_side.asp" but i am a newbie so i am still learning. — Keksi, May 08 '23 at 07:22
If you want to rotate the image with CSS it's as simple a a `transform: rotate(90deg)`, if you want to have the image itself rotated, you might want to take a look at this: https://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images — Apodemus, May 08 '23 at 07:27
No sir. As i mentioned before I don't want to rotate the images after it is uploaded. I want after i upload the images to be aligned side by side so in horizontal position and not in vertical as it is now. — Keksi, May 08 '23 at 07:32
First, I'm not a sir, second, aren't these two scenarios you have described the same? — Apodemus, May 08 '23 at 07:37
NO. As i mentioned before you said to rotate the images so my question it is not to rotate the images after i uploaded. The only thing that i am asking is to align them side by side just like columns and not to be shown in vertical as it is now. — Keksi, May 08 '23 at 07:41
you should update the question, now everyone is assuming that you want to rotate the pictures — VilleKoo, May 08 '23 at 08:05

score 2 · Answer 1 · answered May 08 '23 at 07:53

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Defekt</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body>
      <style>                                                 
         label textarea{
         vertical-align: top;i
         }
         div { text-align: left; }
         .thumbnail {
         display: block;
         margin-bottom: 10px;
         }
         .gallery {
         display: flex;
         /*flex-wrap: wrap; */
         margin-top: 10px;
         }
         .gallery > div {
         margin-right: 10px;
         }
         .gallery img {
         display: inline-block;
         object-fit: cover;
         margin: 5px;
         }
         .slidecontainer {
         width: 100%;
         }
         .slider {
         -webkit-appearance: none;
         width: 100%;
         height: 25px;
         background: #d3d3d3;
         outline: none;
         opacity: 0.7;
         -webkit-transition: .2s;
         transition: opacity .2s;
         }
         .slider:hover {
         opacity: 1;
         }
         .slider::-webkit-slider-thumb {
         -webkit-appearance: none;
         appearance: none;
         width: 25px;
         height: 25px;
         background: #04AA6D;
         cursor: pointer;
         }
         .slider::-moz-range-thumb {
         width: 25px;
         height: 25px;
         background: #04AA6D;
         cursor: pointer;
         }
      </style>
      <h1 align="center"> DATABASE </h1>
      <h3> <b>Diametri i gypit: </b> </h3>
      <div class="slidecontainer">
         <input type="range" min="63" max="1800" value="63" class="slider" id="myRange"> 
         <h4 align="left"> fi ɸ : <span id="demo"></span> mm</h4>
      </div>
      <label for="lang"><b> Materiali Gypit </b> </label>
      <select name="Materiali" Id="lang">
         <option value="Azbest">Azbest</option>
         <option value="GRP">GRP</option>
         <option value="Pllastik">Pllastik</option>
         <option value="Heker Cingtun">Heker Cingtun</option>
      </select>
      <div>
         <p> <b> Anëtarët: </b></p>
         <textarea rows="5" cols="20"  ></textarea>
      </div>
      <label>
         <p>
      <label for="w3review" value="Fshati"> <b> Fshati: </b></label></p>
      <textarea id="w3review" name="w3review" rows="2" cols="20"> </textarea>
      <form action="/action_page.php">
      <p><label for="w3review" value="Përshkrimi"> <b> Përshkrimi: </b> </label></p>
      <textarea id="w3review" name="w3review" rows="4" cols="80"> </textarea>
      <! -- Upload picture --> 
      <p> <b> Ngarko foto: </b> </p>
      <input type="file" accept="image/*"  onchange="showMyImage(this)" multiple id="gallery-photo-add" />
      <br/>
      <div class="gallery"></div>
      <br/>
      <img id="thumbnil"  src="your_image_url" width="300" height="200" alt="image"/>
      <br>
      <br>
      <br>
      <br>
      </br>                       
      </br>
      <button class="button-print-or-save-document">Ruaj</button>
      <script>
         <!-- Ruaj Foton -- !>
         
         
         function showMyImage(fileInput) {
         var files = fileInput.files;
         for (var i = 0; i < files.length; i++) {           
         var file = files[i];
         var imageType = /image.*/;     
         if (!file.type.match(imageType)) {
         continue;
         }           
         var img=document.createElement("img");
         img.style.width = "20%";
         img.style.marginTop = "10px";
         img.alt = "image";
         img.classList.add("thumbnail");
         var reader = new FileReader();
         reader.onload = (function(aImg) { 
         return function(e) { 
             aImg.src = e.target.result; 
         }; 
         })(img);
         reader.readAsDataURL(file);
         var gallery = document.querySelector(".gallery");
         var div = document.createElement("div");
         div.style.display = "inline-block";
         div.appendChild(img);
         gallery.appendChild(div);
         }    
         }
         
         
         
         
         
         
         
         var slider = document.getElementById("myRange");
         var output = document.getElementById("demo");
         output.innerHTML = slider.value;
         
         slider.oninput = function() {
         output.innerHTML = this.value;
         }
         
         
         
         
         
         const buttonPrintOrSaveDocument = document.querySelector(
         ".button-print-or-save-document"
         );
         
         function printOrSave() {
         window.print();
         }
         
         buttonPrintOrSaveDocument.addEventListener("click", printOrSave);
         
      </script>
   </body>
</html>

You can try this way: in above code i have made change in css part.

.gallery {
  display: flex;
  /* flex-wrap: wrap; */
  margin-top: 10px;
}

if I understand your issue correctly then you want to display image horizontally after upload.

THIS IS EXACTLY WHAT I WAS ASKING!!!! Thank you soo much. it works good the shape of images is good but the only thing that is missed is that after i upload images they are too far away from each other. Could it be margin in .gallery img that it's making this distance? — Keksi, May 08 '23 at 08:10
It is said: "Thanks for the feedback! You need at least 15 reputation to cast a vote, but your feedback has been recorded." But i upvoted your answer. If you can tell me why there's a distance between images after upload please feel free to show the code. — Keksi, May 08 '23 at 08:27
@Keksi This looks like you are giving people a work assignment with more work after they answer. Please don't use StackOverflow as a code writing service. Learn the basics of CSS - documentation and tuturials are often times freely available on the internet. — Peter Krebs, May 08 '23 at 08:47

How to make my upload pictures from vertical to horizontal?

1 Answers1