search

Home  >  Q&A  >  body text

Is it possible to dynamically update a "gallery" of images when a user submits an image?

I am creating a website to display all the photos of my grandfather. Since I don't have all the photos, and there will be others coming and going, I thought it would be nice to have a website where they could submit photos and then view a "database" of them.

Currently, I have an InfinityFree website and a github website. InfinityFree is very good at providing a web platform with a great editor, but I can't for the life of me figure out the server-side thing (i.e. how users submit files and how they view them). Both have the same code, but I tried using node.js which is not available on InfinityFree, that's why I left it for now and moved the code to github.

I don't know where to go since none of the searches I've done have yielded meaningful answers. Should I take a route and learn how to get then store then display the photos on the website?

Currently this is my code. It is the basic backbone of the website. Now all it does is display the image selected by the user. 

<!doctype html>
<html>
<head>
    <div class="header">
        <h1>Welcome!</h1>
        <p>Here is a site to view and submit photos of _________</p>
    </div>
    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <style>
    body {
        font-family: Arial;
        margin: 0;
    }
        
    .header {
        padding: 70px;
        text-align: center;
        background: #663399;
        color: white;
        position: relative;
        top: -35px;
    }
            
    .header h1 {
        font-size: 65px;
        margin-top: 0;
        position: relative;
        top: 0px;
    }
    
    .header p {font-size: 25px;}

    .content {padding:20px;}
    </style>
</head>
    
<body>
    <script>
    function handleImageUpload() 
    {
        var image = document.getElementById("upload").files[0];
        var reader = new FileReader();
        reader.onload = function(e) {
        document.getElementById("display-image").src = e.target.result;
        }
        reader.readAsDataURL(image);
    } 
    </script>
    
    <input type="file" onchange="handleImageUpload()" id="upload" multiple />
    <img id="display-image" src="#" alt="your image" />

</body>
</html>````


I am just struggling to see how I have not found a useful video, website, or text discussing how to do this.
It seems as though this should be well-documented and/or easy to implement.
Maybe I am just crazy.

P粉715228019P粉715228019320 days ago596

reply all(1)I'll reply

  • P粉713846879

    P粉7138468792024-02-05 09:10:33

    This is a guide on how to upload and retrieve images on mongodb

    Then you need a full-stack hosting platform and I recommend it to you Cyclic (user-friendly and free) )

    Any images you upload to MongoDb will then appear on your website You can also make the upload form a separate page if you want, just to show you how it works

    Another way to use firebase Here

    reply
    0
  • Cancelreply