The Open-event webapp generator now provides the user a facility to upload the speakers and sponsors images inside the ZIP as images/speakers and images/sponsors. After that the user will just have to specify the path of the images inside JSON such as /images/speakers/photoname.jpg instead of URL’s.
How It Works ?
Whenever a user uploads a ZIP containing different files, it is extracted in dist/ folder according to the filename inside ZIP.
//fold.js... function to extract files according to folder name var admZip = require('adm-zip'); const distPath = __dirname + '/../../../dist'; const uploadsPath = __dirname + '/../../../uploads'; const mockPath = __dirname + '/../../../mockjson' copyUploads: function(appFolder, uploadedFile) { const appPath = distPath + '/' + appFolder; fs.mkdirpSync(appPath + '/json'); var zip = new admZip(uploadedFile); var zipEntries = zip.getEntries(); zipEntries.forEach(function(zipEntry) { switch(zipEntry.entryName){ case 'images/speakers/': zip.extractEntryTo("images/speakers/", appPath ); break; case 'images/sponsors/': zip.extractEntryTo("images/sponsors/", appPath ); break; case 'audio/': zip.extractEntryTo("audio/", appPath); break; case 'sessions': zip.extractEntryTo("sessions", appPath +'/json/'); break; case 'speakers': zip.extractEntryTo("speakers", appPath +'/json/'); break; case 'microlocations' : zip.extractEntryTo("microlocations", appPath+'/json/'); break; case 'event' : zip.extractEntryTo("event", appPath +'/json/'); break; case 'sponsors' : zip.extractEntryTo("sponsors", appPath +'/json/'); break; case 'tracks': zip.extractEntryTo("tracks", appPath +'/json/'); break; default: }
This will send all the speaker images to images/speakers in dist and all sponsors images to images/sponsors in dist ( dist is the folder served to the user).
const appFolder = reqOpts.email + '/' + slugify(reqOpts.name); speakers.forEach((speaker) => { if ((speaker.photo !== null) && (speaker.photo.substring(0, 4) === 'http')) { speaker.photo = urlencode(distHelper.downloadSpeakerPhoto(appFolder, speaker.photo)); } else { var reg = speaker.photo.split(''); if(reg[0] =='/'){ speaker.photo = urlencode(speaker.photo.substring(1,speaker.photo.length)); } } });
//dist.js downloadSpeakerPhoto: function(appFolder, photoUrl) { const appPath = distPath + '/' +appFolder; const photoFileName = photoUrl.split('/').pop(); const photoFilePath = 'images/speakers/' + photoFileName; console.log('Downloading photo : ' + photoFileName); downloadFile(photoUrl, appPath + '/' + photoFilePath); return photoFilePath; },
The code above shows how the image URL’s are split on the basis of ‘/’ to get the last element of the URL that is photoFileName. After that the image can be written inside the folder.
images/speakers/' + photoFileName
This code also handles the case when the images are downloaded by taking URL paths from JSON. If the photo in JSON has a string matched with ‘HTTP’ .Then it is downloaded in images/speakers/ . Finally, the image is downloaded with the same path as specified in JSON which can then be easily related in HTML image tag.
//dist.js Function to download files const downloadFile = function(url, filePath) { const fileStream = fs.createWriteStream(filePath); fileStream.on('error', function(err) { console.log(err); }); try { request(url).pipe(fileStream); } catch (err) { console.log(err); } };
That’s how the images inside the ZIP and the image URL’s inside JSON files are handled in Open-event webapp generator.