2 {{ upvoteCount | shortNum }}
2 {{ upvoteCount | shortNum }}

Allow visitors to upload images

by magnus1
2 replies
Hi there,

I run a service creating personalized tshirts, canvas etc. However, emailing the photos to me isn't always practical as the files are too large.

How can I set up something like this please? Obviously I'd like to be able accept large image files, while not risking my sites safety at the same time.

Please help this html challenged person!

Cheers,
Michelle
#images #upload #visitors
  • Profile picture of the author element121
    Hi Michelle,

    Really you need to set-up something server side to process / upload the images. You can do that easily with PHP or another server side language. Do you know if you web hosting supports that?

    Alternatively if you don't want to get into custom web development, a file sharing service like DropBox or YouSendIt (Now called HighTail) would work for you, then you don't have to worry about you server being potentially compromised.

    Regards,
    Jon
    Signature
    http://element121.com
    {{ DiscussionBoard.errors[10584965].message }}
  • Profile picture of the author noah.whitmore
    This is some relatively advanced stuff. You have a few options...

    1. If you are using an out of the box web builder, like SquareSpace or using GoDaddy's sitebuilder, then you'll want to get in touch with their support team. They would be able to direct towards the specific options that you have. The good thing, if you're in this situation, is that most of these out of the box web building options have what you're looking for. Perhaps you will be able to use their pre-built contact form, and just make sure that their is a 'File Upload' area on the form.

    2. If you use WordPress, you have a few relatively simple options in the form of plugins. Two that I can kind of think of off the top of my head would be 'N-Media Website Contact Form' which also offers file upload - or Contact Form 7 which can be configured to include file upload. In both of these cases, the contact form can serve as the means to upload the image to your server, then you can just download the image from your server.
    N-Media - https://wordpress.org/plugins/websit...h-file-upload/
    Contact Form 7 - https://wordpress.org/plugins/contact-form-7/

    3. No WordPress? No kind of website builder? You need a custom solution. This may be more tricky since you can't really 'drop' anything in. So, you'll be BEST off asking for someone with coding experience to just code something quick for you. You can probably just PM someone here on the WF that has coding experience and hire them for a quick job.

    Or if you want to try to do it by yourself, I would suggest that you take the PHP route. You'll need some kind of server side script to process the upload. First, you should learn some of the basics of HTML and PHP before you jump in, otherwise, you'll end up messing up your site. A lot of people put it down, but for beginners W3Schools Online Web Tutorials is a good resource (in my opinion).

    They have an HTML tutorial at HTML Tutorial and a PHP tutorial at PHP 5 Tutorial.


    I'll give you a head start though.

    You'll want your HTML form to be something like this...


    HTML Code:
    <p>Please use the form below to upload an image for your t-shirt.</p>
<form action="process-upload.php" method="post">
  <label for="image-upload-button">Image File</label>
  <input type="file" name="pic" id="image-upload-button" accept="image/*">
  <input type="submit" name="submit">
</form>

    And your PHP can look something like this (UNTESTED! This is just some starter code for ya')
    Please note: My apologies for any spelling errors in the code comments, I was focused more on the code!

    PHP Code:
    <?php

    /*======================================================================
    // QUICK NOTICE AND WARNING
    //======================================================================
    * Please take note that this is untested code and I cannot guarantee
    * its effectiveness. I also take no responsibility for its use as I
    * cannot speak to the code completeness or security on your server.
    * I hope that it's helpful for you but please USE AT YOUR OWN RISK!
    *
    * Noah Whitmore
    */


    //-----------------------------------------------------
    // Initial Setup
    //-----------------------------------------------------
    //the name of the directory for uploads
    $targetDir = "uploads/"; // <-- you can customize this

    // the max file size (in bytes) that you will accept. 5MB by default
    // use http://www.conversion-metric.org/filesize/megabytes-to-bytes
    $maxFileSize = 52428800; // <-- you can customize this


    /*-----------------------------------------------------
    // Limit File Size
    //-----------------------------------------------------
    * We will check to see if the file size is below the maximum that
    * you have set. Keep in mind that many hosts will limit the file
    * size that PHP can process when a file is uploaded. This limit
    * will be set in your php.ini file - it is the upload_max_filesize
    * setting. If you don't know what I'm talking about, you can ask
    * your host what your 'upload_max_filesize' setting is. You may
    * be able to increase it. Though, I wouldn't suggest going over
    * 10MB unless you are expecting some High Def images
    */
    if ($_FILES["pic"]["size"] > $maxFileSize) {
        echo     "File size is too big";
            $error = "Looks like your file is too big there killer. Try again!";
    } else {


            // below, we create the full path of the uploaded file
            $targetFile = $targetDir . basename($_FILES["pic"]["name"]);
            // below, we grab the file extension
            $imageFileType = pathinfo($targetFile,PATHINFO_EXTENSION);

            /*-----------------------------------------------------
        // Check If File Is Really An Image
        //-----------------------------------------------------
        * This is an important one for security. We need to check if the
        * file is actually an image. Our HTML tries to limit the file to
        * only images, but it's definitely not fool proof!
        */
            if(getimagesize($_FILES["pic"]["tmp_name"]) === false) {
            echo     "File not an image";
                $error = "Slow down there! This file isn't an image. Try again!";
        } else {
            echo     "File is an image";
                $error = 0;
        }
        
        
            /*-----------------------------------------------------
        // Check If File Already Exists
        //-----------------------------------------------------
        * If this file already exists, well just amend the phrase '-copy'
        * to it.
        */
            if (file_exists($targetFile)) {
                $targetFile = $targetDir . basename($_FILES["pic"]["name"]) . "-copy";
            echo     "Ammending file name...";
        }
        
        
            /*-----------------------------------------------------
        // Filter By File Type
        //-----------------------------------------------------
        * This step is not necessary, but it will let you only allow certain
        * file types to be uploaded. This may be useful if you want to
        * disallow the use of large format file types like TIFF.
        */
        
            if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
            && $imageFileType != "gif" ) {
            echo     "File type not allowed";
                $error = "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
        }
        
    }     // end else from file size check


    //-----------------------------------------------------
    // Process Upload Or Not
    //-----------------------------------------------------
    if ($error !== false) {
        echo     "Sorry my friend, your upload was not completed for the following reason...";
        echo     PHP_EOL . $error;
    } else {
        if (    move_uploaded_file($_FILES["pic"]["tmp_name"], $targetFile)) {
            echo     "The file ". $targetFile . " has been uploaded.";
        } else {
            echo     "I'm sorry, but there was an error while uploading your file.";
        }
    }
    Let me know if you have any questions!
    Signature
    No Pitch For The Moment - Just A Nice Hello.
    So... 'Hello'
    Feel free to PM me if you have any questions about my posts. I'd like to hear from you!
    {{ DiscussionBoard.errors[10600562].message }}

Trending Topics