integrates photo uploading in the main note interface

Quill corrects the photo rotation based on exif data since iOS tends to take landscape photos and set the rotation bit when holding it in portrait mode.

4 files changed, 78 insertions, 65 deletions

diff --git a/views/dashboard.php b/views/dashboard.php
index b5c4aa3..a20a44b 100644
--- a/views/dashboard.php
+++ b/views/dashboard.php
@@ -8,7 +8,6 @@
     <li><a href="/bookmark"><img src="/images/bookmark.svg" width="60"></a></li>
     <li><a href="/favorite"><img src="/images/star.svg" width="60"></a></li>
     <li><a href="/repost"><img src="/images/repost.svg" width="60"></a></li>
-    <li><a href="/photo"><img src="/images/camera.svg" width="60"></a></li>
     <li><a href="/itinerary"><img src="/images/plane.svg" width="60"></a></li>
     <li><a href="/email"><img src="/images/email.svg" width="60"></a></li>
   </ul>
diff --git a/views/layout.php b/views/layout.php
index f853edd..da97687 100644
--- a/views/layout.php
+++ b/views/layout.php
@@ -69,7 +69,6 @@ if(property_exists($this, 'include_facebook')) {
           <li><a href="/new">Note</a></li>
           <li><a href="/bookmark">Bookmark</a></li>
           <li><a href="/favorite">Favorite</a></li>
-          <li><a href="/photo">Photo</a></li>
         <?php } ?>
 
         <li><a href="/docs">Docs</a></li>
diff --git a/views/new-post.php b/views/new-post.php
index 532a5ca..6c76f51 100644
--- a/views/new-post.php
+++ b/views/new-post.php
@@ -10,21 +10,28 @@
         </div>
 
         <div class="form-group">
-          <label for="note_in_reply_to"><code>in-reply-to</code> (optional, a URL you are replying to)</label>
+          <label for="note_in_reply_to"><code>in-reply-to</code> (a URL you are replying to)</label>
           <input type="text" id="note_in_reply_to" value="<?= $this->in_reply_to ?>" class="form-control">
         </div>
 
         <div class="form-group">
-          <label for="note_category"><code>category</code> (optional, comma-separated list of tags)</label>
+          <label for="note_category"><code>category</code> (comma-separated list of tags, will be posted as an array)</label>
           <input type="text" id="note_category" value="" class="form-control" placeholder="e.g. web, personal">
         </div>
 
         <div class="form-group">
-          <label for="note_slug"><code>slug</code> (optional)</label>
+          <label for="note_slug"><code>slug</code></label>
           <input type="text" id="note_slug" value="" class="form-control">
         </div>
 
         <div class="form-group">
+          <label for="note_photo"><code>photo</code></label>
+          <input type="file" name="note_photo" id="note_photo" accept="image/*" onchange="previewPhoto(event)">
+          <br>
+          <img src="" id="photo_preview" style="max-width: 300px; max-height: 300px;">
+        </div>
+
+        <div class="form-group">
           <label for="note_syndicate-to"><code>syndicate-to</code> <a href="javascript:reload_syndications()">(refresh)</a></label>
           <div id="syndication-container">
             <?php
@@ -72,7 +79,7 @@
       <?php if($this->test_response): ?>
         <h4>Last response from your Micropub endpoint <span id="last_response_date">(<?= relative_time($this->response_date) ?>)</span></h4>
       <?php endif; ?>
-      <pre id="test_response" style="width: 100%; min-height: 240px;"><?= htmlspecialchars($this->test_response) ?></pre>
+      <pre id="test_response" class="<?= $this->test_response ? '' : 'hidden' ?>" style="width: 100%; min-height: 240px;"><?= htmlspecialchars($this->test_response) ?></pre>
 
 
       <div class="callout">
@@ -105,13 +112,13 @@
   </div>
 
 <style type="text/css">
+
 #note_content_remaining {
   float: right;
   font-size: 0.8em;
   font-weight: bold;
 }
 
-
 .pcheck206 { color: #6ba15c; } /* tweet fits within the limit even after adding RT @username */
 .pcheck207 { color: #c4b404; } /* danger zone, tweet will overflow when RT @username is added */
 .pcheck200,.pcheck208 { color: #59cb3a; } /* exactly fits 140 chars, both with or without RT */
@@ -120,6 +127,10 @@
 </style>
 
 <script>
+function previewPhoto(event) {
+  document.getElementById('photo_preview').src = URL.createObjectURL(event.target.files[0]);
+}
+
 $(function(){
 
   $("#note_content").on('change keyup', function(e){
@@ -146,11 +157,69 @@ $(function(){
       syndications.push($(btn).data('syndication'));
     });
 
-    $.post("/micropub/post", {
+    var category = csv_to_array($("#note_category").val());
+
+    var formData = new FormData();
+    if(v=$("#note_content").val()) {
+      formData.append("content", v);      
+    }
+    if(v=$("#note_in_reply_to").val()) {
+      formData.append("in-reply-to", v);
+    }
+    if(v=$("#note_location").val()) {
+      formData.append("location", v);
+    }
+    if(category.length > 0) {
+      formData.append("category", category);
+    }
+    if(syndications.length > 0) {
+      formData.append("syndicate-to", syndications);
+    }
+    if(v=$("#note_slug").val()) {
+      formData.append("slug", v);
+    }
+
+    if(document.getElementById("note_photo").files[0]) {
+      formData.append("photo", document.getElementById("note_photo").files[0]);
+    }
+
+    // Need to append a placeholder field because if the file size max is hit, $_POST will
+    // be empty, so the server needs to be able to recognize a post with only a file vs a failed one.
+    // This will be stripped by Quill before it's sent to the Micropub endpoint
+    formData.append("null","null");
+
+
+    var request = new XMLHttpRequest();
+    request.open("POST", "/micropub/multipart");
+    request.onreadystatechange = function() {
+      if(request.readyState == XMLHttpRequest.DONE) {
+        console.log(request.responseText);
+        try {
+          var response = JSON.parse(request.responseText);
+          if(response.location) {
+            window.location = response.location;
+            // console.log(response.location);
+          } else {
+            $("#test_response").html(response.response).removeClass('hidden');
+            $("#test_success").addClass('hidden');
+            $("#test_error").removeClass('hidden');
+          }
+        } catch(e) {
+          $("#test_success").addClass('hidden');
+          $("#test_error").removeClass('hidden');
+        }
+        $("#btn_post").removeClass("loading disabled").text("Post");
+      }
+    }
+    $("#btn_post").addClass("loading disabled").text("Working...");
+    request.send(formData);
+
+    /*
+    $.post("/micropub/multipart", {
       content: $("#note_content").val(),
       'in-reply-to': $("#note_in_reply_to").val(),
       location: $("#note_location").val(),
-      category: csv_to_array($("#note_category").val()),
+      category: category,
       slug: $("#note_slug").val(),
       'syndicate-to': syndications
     }, function(data){
@@ -180,6 +249,8 @@ $(function(){
       $("#last_request_container").show();
       $("#test_response").html(response.response);
     });
+    */
+
     return false;
   });
 
diff --git a/views/photo.php b/views/photo.php
deleted file mode 100644
index 25651dd..0000000
--- a/views/photo.php
+++ /dev/null
@@ -1,56 +0,0 @@
-  <div class="narrow">
-    <?= partial('partials/header') ?>
-
-      <form method="POST" action="/photo" role="form" style="margin-top: 20px;" id="note_form" enctype="multipart/form-data">
-
-        <div class="form-group">
-          <label for="note_photo"><code>photo</code></label>
-          <div class="uploadBtn btn btn-default">
-            <span>Choose File</span>
-            <input type="file" name="note_photo" id="note_photo" accept="image/jpg,image/jpeg,image/gif,image/png">
-          </div>
-          <div class="hidden" id="photo_filename_container">
-            <input type="text" class="form-control" disabled="disabled" id="photo_filename">
-          </div>
-          <p class="help-block">Photo JPEG, GIF or PNG.</p>
-        </div> 
-
-        <div class="form-group">
-          <label for="note_content"><code>content</code> (optional)</label>
-          <textarea name="note_content" id="note_content" value="" class="form-control" style="height: 4em;"><?php if(isset($this->note_content)) echo $this->note_content ?></textarea>
-        </div>
-
-        <button class="btn btn-success" id="btn_post">Post</button>
-
-        <div style="clear:both;"></div>
-      </form>
-
-      <?php if(!empty($this->location)): ?>
-        <div class="alert alert-success">
-          <strong>Success!</strong> Photo posted to: <em><a href="<?= $this->location ?>"><?= $this->location ?></a></em>
-        </div>
-      <?php endif ?>
-
-      <?php if(!empty($this->error)): ?>
-        <div class="alert alert-danger">
-          <strong>Error:</strong> <em><?= $this->error ?></em>
-        </div>
-      <?php endif ?>
-
-      <?php if(!empty($this->response)): ?>
-        <h4>Response:</h4>
-        <pre><?= $this->response ?></pre>
-      <?php endif ?>
-  </div>
-  <script>
-  $(function(){
-    document.getElementById("note_photo").onchange = function () {
-      var filename = this.value;
-      if(filename.match(/[^\\]+$/)) {
-        filename = filename.match(/[^\\]+$/)[0];
-      }
-      $("#photo_filename").val(filename);
-      $("#photo_filename_container").removeClass("hidden");
-    };
-  });
-  </script>
\ No newline at end of file