3

I want to make a webpage that allows people to upload images, but I don't think my server can take it. So I want to upload the images to Imgur. I already have some code to do this:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Imgur Upload Test</title>
        <style>
            #image_preview, #image_preview_2 {
                max-width: 200px;
            }
        </style>
    </head>
    <body>
        <h1>Imgur Upload Test</h1>
        <input type="file" id="image_selector" />
        <h2>Image Preview:</h2>
        <img src="none" id="image_preview" />
        <h2>Image On Imgur:</h2>
        <img src="none" id="image_preview_2" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
            $("#image_selector").change(function() {
                var reader = new FileReader();
                reader.onload = function(e) {
                    var data = e.target.result.substr(e.target.result.indexOf(",") + 1, e.target.result.length);
                    $("#image_preview").attr("src", e.target.result);
                    $.ajax({
                        url: 'https://api.imgur.com/3/image',
                        headers: {
                            'Authorization': 'Client-ID MY_CLIENT_ID'
                        },
                        type: 'POST',
                        data: {
                            'image': data,
                            'type': 'base64'
                        },
                        success: function(response) {
                            $("#image_preview_2").attr("src", response.data.link);
                        }, error: function() {
                            alert("Error while uploading...");
                        }
                    });
                };
                reader.readAsDataURL(this.files[0]);
            });
        </script>
    </body>
</html>

The problem here is that I can't think of a way to keep my client ID secret. How would I be able to do this without having to upload the image to my server?

Oscar Pérez
  • 31
  • 4
  • Your question: you would have to route it through your server to keep anything secret, but you don't have to worry about your client id. – forresto Mar 10 '16 at 16:14
  • Not your question: you don't need the FileReader stuff, and can upload the `file` blob directly, if you use `$.ajax` and `processData: false` : http://stackoverflow.com/a/11399659/592125 – forresto Mar 10 '16 at 16:15

0 Answers0