Is there a way for a user to submit a photo or file through a Lectora course?

rwalters
rwalters Community Member Posts: 276
I assume this isn't possible with Lectora on it's own. To receive test results (we don't have an LMS), we use a custom script (VBScript) to send an email. I have also used the same script, but with forms, to create surveys that users fill out . Anyway, now someone asked to have these forms let someone submit photos. I told them I don't think that is possible, but I would ask just in case. So, has anyone figured out a way to do this?

Comments

  • jvalley4735
    jvalley4735 Community Member Posts: 1,357
    Very interesting request!  I don't think I've seen a conversation floating around in the Community about this but I'll do some poking.  I'll be curious to see the answer as well.  Can you share a little bit more about the nature of the request so I can get idea of what you're trying to accomplish?  I immediately went to a safety course where someone was required to submit a photo of an issue before receiving credit.
  • rwalters
    rwalters Community Member Posts: 276
    Well, the nature of this is kind of mundane. We just want users to tell us what kind of camera they have and submit 3 photos so we can see whether their camera produces quality photos.

    However, potentially I would love to have this in our training as we are teaching people how to take properly framed photos. It would be nice to grade them on this.

    Another potential use is that our training teaches people to identify different styles of homes. No matter how many examples we show, some still don't get it. It would be nice to ask them to go out and take photos of homes that they think fit these styles. If they could go out and identify these then submit those in an unscored test, it might help them understand these concepts.

    We also teach people how to draw a diagram. It would be great if they could submit examples.
  • t_johnb
    t_johnb [email protected] Community Member Posts: 295 ☆ Roadie ☆
    There is no native way, but a simple HTML extension object with some form code copied from the web should do the trick. You'll need to be a bit familiar with JavaScript and server side scripting, but it should be able to do what you are looking for.
  • klaatu
    klaatu Community Member Posts: 988
    Here's a solution that is fairly easy to apply. This will allow the upload of a picture to your server formatted as (.gif, .jpeg, .jpg, .pjpeg, x-png, .png) under 200000kb (200mb). This will not work locally unless you have a local server like xampp installed. It must be uploaded onto a server to function. While I normally do not suggest using the Meta tags html extension to include scripts I will here because it is easier to implement and explain and works fine.

    Open your Lectora project and right under the title add an HTML Extension. Go to its properties and select Meta tags. Then click Edit and insert the following code:

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    function submitForm() {
    console.log("submit event");
    var fd = new FormData(document.getElementById("fileinfo"));
    fd.append("label", "FromLectora-");
    $.ajax({
    url: "upload.php",
    type: "POST",
    data: fd,
    enctype: 'multipart/form-data',
    processData: false, // tell jQuery not to process the data
    contentType: false // tell jQuery not to set contentType
    }).done(function( data ) {
    $("status").html("PHP Output:");
    $("status2").html( data );
    });
    return false;
    }
    </script>
    NOTE: If you copy and paste right from here you may have to delete the pasted quotes and put in new ones. I have seen quotes get messed up using copy and paste from this forum. Without going into too much detail, the above code links to a content delivery network housing jQuery so it is available to your project. It also creates a JavaScript function that will add a prefix "FromLectora-" to the name of a selected file and send it off to your server. The staus of the send will be reflected back on the page.
    On whatever page you want to place the upload file requester add another HTML extension. This time choose Custom DIV. Well, actually it is the default so you shouldn't have to choose it. Click Edit and insert the following code:
    <form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();">
    <label>Select a file:</label><br>
    <input type="file" name="file" required /><br><br>
    <input type="submit" value="Upload" />
    </form>
    <div id="output"></div><br><br>
    <div id="status"></div><br>
    <div id="status2"></div>
    This will add a label, file selector, and upload button on the page. It will also add the needed elements to report back on the send status. I did not take the time to spruce these up with CSS. I'm writing another fairly
    lengthy article on CSS, coming soon. Okay, we are almost done. Here is maybe the trickiest part. Open up notepad or your favorite plain text editor and copy the following code:

    <?php
    if ($_POST["label"]) {
    $label = $_POST["label"];
    }
    $allowedExts = array("gif", "jpeg", "jpg", "png");
    $temp = explode(".", $_FILES["file"]["name"]);
    $extension = end($temp);
    if ((($_FILES["file"]["type"] == "image/gif")
    || ($_FILES["file"]["type"] == "image/jpeg")
    || ($_FILES["file"]["type"] == "image/jpg")
    || ($_FILES["file"]["type"] == "image/pjpeg")
    || ($_FILES["file"]["type"] == "image/x-png")
    || ($_FILES["file"]["type"] == "image/png"))
    && ($_FILES["file"]["size"] < 200000)
    && in_array($extension, $allowedExts)) {
    if ($_FILES["file"]["error"] > 0) {
    echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
    } else {
    $filename = $label.$_FILES["file"]["name"];
    echo "Upload: " . $_FILES["file"]["name"] . "<br>";
    echo "Type: " . $_FILES["file"]["type"] . "<br>";
    echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
    echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";

    if (file_exists("uploads/" . $filename)) {
    echo $filename . " already exists. ";
    } else {
    move_uploaded_file($_FILES["file"]["tmp_name"],
    "uploads/" . $filename);
    echo "Stored in: " . "uploads/" . $filename;
    }
    }
    } else {
    echo "Invalid file";
    }
    ?>

    Change the file extension from .txt to 'all files' and save this as "upload.php" (without the quotes).

    Publish your project and upload to your server (LMS). After you upload the published files place the upload.php file you just saved  in the same directory (folder) as the index.html. Also, create a folder called "uploads" (without the quotes) and make sure it is located in the same directory/folder as the index.html.

    That's it. I've tested this in the latest Chrome, Firefox and IE 11 and Microsoft Edge browsers. I have not tested in older IE but should not have a problem with 10+. After sucessful upload you will find the files in the uploads folder.

    I did not write the above scripts from scratch. I altered versions of a script I found in Stackoverflow (http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload) to work in Lectora. Credit goes to lee8oi for the original scripts. If you need any help implementing this feel free to get in touch with me. The .awt is also included in the attached zip file.

    Darrel