Added author attribute

examples/model-inmemory.js

@@ -10,10 +10,18 @@ const renameAsync = promisify(fs.rename);
 const config = require('./config');
 
 const data = [
-  { id: 1, title: 'I caught a little fish...', file: '1.png' },
-  { id: 2, title: 'The fish I caught was this big.', file: '2.png' },
-  { id: 3, title: 'The fish I caught was quite big.', file: '3.png' },
-  { id: 4, title: 'I caught the biggest fish you\'ve ever seen.', file: '4.png' },
+  {
+    id: 1, title: 'I caught a little fish...', file: '1.png', author: 'Rich Boakes',
+  },
+  {
+    id: 2, title: 'The fish I caught was this big.', file: '2.png', author: 'Rich Boakes',
+  },
+  {
+    id: 3, title: 'The fish I caught was quite big.', file: '3.png', author: 'Rich Boakes',
+  },
+  {
+    id: 4, title: 'I caught the biggest fish you\'ve ever seen.', file: '4.png', author: 'Rich Boakes',
+  },
 ];
 
 data.nextId = 5;
@@ -58,6 +66,7 @@ module.exports.listPictures = (title, sort) => {
     id: item.id,
     title: item.title,
     file: config.webimg + item.file,
+    author: item.author,
   }));
 
   return retval;
@@ -114,7 +123,7 @@ module.exports.deletePicture = async (id) => {
 };
 
 
-module.exports.uploadPicture = async (reqFile, title) => {
+module.exports.uploadPicture = async (reqFile, title, author) => {
   // move the file where we want it
   const fileExt = reqFile.mimetype.split('/')[1] || 'png';
   const newFilename = reqFile.filename + '.' + fileExt;
@@ -130,10 +139,12 @@ module.exports.uploadPicture = async (reqFile, title) => {
     id: data.nextId,
     file: newFilename,
     title,
+    author,
   };
 
   data.nextId += 1;
   data.push(item);
-
-  return { id: item.id, title: item.title, file: config.webimg + item.file };
+  return {
+    id: item.id, title: item.title, file: config.webimg + item.file, author: item.author,
+  };
 };

examples/model-mysql.js

@@ -24,7 +24,7 @@ const sqlPromise = mysql.createConnection(config.mysql);
 module.exports.listPictures = async (title, sort) => {
   const sql = await sqlPromise;
 
-  let query = 'SELECT id, title, filename FROM picture';
+  let query = 'SELECT id, title, filename, author FROM picture';
   if (title) {
     query += ' WHERE title LIKE ' + sql.escape('%' + title + '%');
   }
@@ -51,6 +51,7 @@ module.exports.listPictures = async (title, sort) => {
       id: row.id,
       title: row.title,
       file: config.webimg + row.filename,
+      author: row.author,
     };
   });
 };
@@ -74,7 +75,7 @@ module.exports.deletePicture = async (id) => {
 };
 
 
-module.exports.uploadPicture = async (reqFile, title) => {
+module.exports.uploadPicture = async (reqFile, title, author) => {
   const sql = await sqlPromise;
 
   // move the file where we want it
@@ -86,8 +87,11 @@ module.exports.uploadPicture = async (reqFile, title) => {
   const dbRecord = {
     filename: newFilename,
     title,
+    author,
   };
 
   const [rows] = await sql.query(sql.format('INSERT INTO picture SET ?', dbRecord));
-  return { id: rows.insertId, title: dbRecord.title, file: config.webimg + dbRecord.filename };
+  return {
+    id: rows.insertId, title: dbRecord.title, file: config.webimg + dbRecord.filename, author: dbRecord.author,
+  };
 };

examples/server.js

@@ -86,7 +86,7 @@ async function deletePicture(req, res) {
 
 async function uploadPicture(req, res) {
   try {
-    const retval = await db.uploadPicture(req.file, req.body.title);
+    const retval = await db.uploadPicture(req.file, req.body.title, req.body.author);
     if (req.accepts('html')) {
       // browser should go to the listing of pictures
       res.redirect(303, '/#' + retval.id);

examples/sql_init.sql

@@ -1,12 +1,14 @@
 create database if not exists pictures;
 
+drop table if exists pictures.picture;
 create table if not exists pictures.picture (
   id int primary key auto_increment,
   title varchar(100),
-  filename varchar(60)
+  filename varchar(60),
+  author varchar(50)
 ) charset 'utf8mb4';
 
-insert ignore into pictures.picture values (1, 'I caught a little fish...', '1.png');
-insert ignore into pictures.picture values (2, 'The fish I caught was this big.', '2.png');
-insert ignore into pictures.picture values (3, 'The fish I caught was quite big.', '3.png');
-insert ignore into pictures.picture values (4, "I caught the biggest fish you've ever seen.", '4.png');
+insert ignore into pictures.picture values (1, 'I caught a little fish...', '1.png', 'Rich Boakes');
+insert ignore into pictures.picture values (2, 'The fish I caught was this big.', '2.png', 'Rich Boakes');
+insert ignore into pictures.picture values (3, 'The fish I caught was quite big.', '3.png', 'Rich Boakes');
+insert ignore into pictures.picture values (4, "I caught the biggest fish you've ever seen.", '4.png', 'Rich Boakes');

examples/webpages/index.html

@@ -31,7 +31,8 @@ <h1>JStagram</h1>
     <p class="deny">cannot accept this file</p>
     <form class="confirm">
       <span class="preview"></span>
-      <label class="title">Title: <input id="title" type="text" size="40" placeholder="enter title" minlength="4" maxlength="100" required></label>
+      <label class="title">Title: <input id="title" type="text" size="40" placeholder="enter title" minlength="4" maxlength="60" required></label>
+      <label class="author">Author: <input id="author" type="text" size="20" placeholder="enter author" minlength="4" maxlength="50" required></label>
       <button class="upload">upload</button>
       <button class="cancel">cancel</button>
     </form>

examples/webpages/pictures.js

@@ -10,6 +10,7 @@
   const btnUpload = document.querySelector('button.upload');
   const btnCancel = document.querySelector('button.cancel');
   const elTitle = elUpload.querySelector('input#title');
+  const elAuthor = elUpload.querySelector('input#author');
   const elPreview = elUpload.querySelector('.preview');
 
   window.addEventListener('load', init);
@@ -65,14 +66,20 @@
       container.classList.add('picture');
       elMain.appendChild(container);
 
+      let el = document.createElement('p');
+      el.classList.add('title');
+      el.textContent = pic.author;
+      container.appendChild(el);
+
       const a = document.createElement('a');
       a.classList.add('img');
       a.href = pic.file;
       container.appendChild(a);
 
-      let el = document.createElement('img');
+      el = document.createElement('img');
       el.src = pic.file;
       el.alt = pic.title;
+      el.title = pic.author;
       a.appendChild(el);
 
       el = document.createElement('p');
@@ -180,6 +187,7 @@
     const data = new FormData();
     data.append('picfile', file);
     data.append('title', elTitle.value);
+    data.append('author', elAuthor.value);
 
     btnCancel.disabled = true;
     btnUpload.disabled = true;

examples/webpages/upload.html

@@ -6,7 +6,8 @@ <h1><a href="/">JStagram</a></h1>
 <h2>Upload a picture</h2>
 
 <form action="/api/pictures" method="post" enctype="multipart/form-data">
-  <p><input name="title" type="text" autofocus size="40" placeholder="enter title" minlength="4" maxlength="100" required></p>
+  <p><input name="title" type="text" autofocus size="40" placeholder="enter title" minlength="4" maxlength="60" required></p>
+  <p><input name="author" type="text" autofocus size="40" placeholder="enter author" minlength="4" maxlength="50" required></p>
   <p><input name="picfile" type="file" accept="image/*"></p>
   <p><input name="submit" type="submit" value="Upload"></p>
 </form>