Making the addmedia (TinyMCE) plugin upload media and insert appropriate markup

a.k.a. fun with async file uploads

--HG--
branch : dev
This commit is contained in:
Nathan Heskew
2010-03-04 17:47:35 -08:00
parent 2d1cd3dc53
commit b449360e75
3 changed files with 50 additions and 7 deletions

View File

@@ -1,6 +1,7 @@
using System; using System;
using System.Collections.Generic; using System.Collections.Generic;
using System.IO; using System.IO;
using System.Text;
using System.Web; using System.Web;
using System.Web.Mvc; using System.Web.Mvc;
using Orchard.Localization; using Orchard.Localization;
@@ -159,20 +160,20 @@ namespace Orchard.Media.Controllers {
} }
[HttpPost] [HttpPost]
public JsonResult AddFromClient() { public ContentResult AddFromClient() {
var viewModel = new MediaItemAddViewModel(); var viewModel = new MediaItemAddViewModel();
try { try {
UpdateModel(viewModel); UpdateModel(viewModel);
if (!Services.Authorizer.Authorize(Permissions.UploadMediaFiles)) if (!Services.Authorizer.Authorize(Permissions.UploadMediaFiles))
return Json(new { error = T("ERROR: You don't have permission to upload media files").ToString() }); return Content(string.Format("<script type=\"text/javascript\">var result = {{ error: \"{0}\" }};</script>", T("ERROR: You don't have permission to upload media files")));
if (Request.Files.Count < 1 || Request.Files[0].ContentLength == 0) if (Request.Files.Count < 1 || Request.Files[0].ContentLength == 0)
return Json(new { error = T("HEY: You didn't give me a file to upload").ToString() }); return Content(string.Format("<scipt type=\"text/javascript\">var result = {{ error: \"{0}\" }};</script>", T("HEY: You didn't give me a file to upload")));
try { try {
_mediaService.GetMediaFiles(viewModel.MediaPath); _mediaService.GetMediaFiles(viewModel.MediaPath);
} }
catch //media api needs a little work, like everything else of course ;) catch //media api needs a little work, like everything else of course ;) <- ;) == my stuff included. to clarify I need a way to know if the path exists or have UploadMediaFile create paths as necessary but there isn't the time to hook that up in the near future
{ {
_mediaService.CreateFolder(viewModel.MediaPath, ""); _mediaService.CreateFolder(viewModel.MediaPath, "");
} }
@@ -180,10 +181,10 @@ namespace Orchard.Media.Controllers {
var file = Request.Files[0]; var file = Request.Files[0];
_mediaService.UploadMediaFile(viewModel.MediaPath, file); _mediaService.UploadMediaFile(viewModel.MediaPath, file);
return Json(new { url = Path.Combine(_mediaService.GetRootUrl(), string.Format("{0}/{1}", viewModel.MediaPath, file.FileName)).Replace("\\", "/") }); return Content(string.Format("<script type=\"text/javascript\">var result = {{ url: \"{0}\" }};</script>", Path.Combine(_mediaService.GetRootUrl(), string.Format("{0}/{1}", viewModel.MediaPath, Path.GetFileName(file.FileName))).Replace("\\", "/")));
} }
catch (Exception exception) { catch (Exception exception) {
return Json(new { error = T("ERROR: Uploading media file failed: {0}", exception.Message).ToString() }); return Content(string.Format("<script type=\"text/javascript\">var result = {{ error: \"{0}\" }};</script>", T("ERROR: Uploading media file failed: {0}", exception.Message)));
} }
} }

View File

@@ -6,7 +6,7 @@
<script type="text/javascript" src="js/addmedia.js"></script> <script type="text/javascript" src="js/addmedia.js"></script>
</head> </head>
<body> <body>
<form enctype="multipart/form-data" method="post"> <form enctype="multipart/form-data" method="post" onsubmit="return AddMediaDialog.addMedia(this);">
<div class="tabs"> <div class="tabs">
<ul> <ul>
<li id="general_tab" class="current"><span><a href="#general_tab">{#addmedia_dlg.title}</a></span></li> <li id="general_tab" class="current"><span><a href="#general_tab">{#addmedia_dlg.title}</a></span></li>

View File

@@ -1,11 +1,53 @@
tinyMCEPopup.requireLangPack("addmedia"); tinyMCEPopup.requireLangPack("addmedia");
// async media file uploads brought to you with a little insight from reading: http://www.bennadel.com/blog/1244-ColdFusion-jQuery-And-AJAX-File-Upload-Demo.htm
var AddMediaDialog = { var AddMediaDialog = {
init: function() { init: function() {
var form = document.forms[0]; var form = document.forms[0];
form.action = tinyMCE.activeEditor.getParam('addmedia_action'); form.action = tinyMCE.activeEditor.getParam('addmedia_action');
form.MediaPath.value = tinyMCE.activeEditor.getParam('addmedia_path'); form.MediaPath.value = tinyMCE.activeEditor.getParam('addmedia_path');
form.__RequestVerificationToken.value = tinyMCE.activeEditor.getParam('request_verification_token'); form.__RequestVerificationToken.value = tinyMCE.activeEditor.getParam('request_verification_token');
},
addMedia: function(form) {
var callback = AddMediaDialog.insertMediaAndClose;
var iframeName = "addmedia__" + (new Date()).getTime()
var iframe = document.createElement("iframe");
iframe.name = iframeName;
iframe.src = "about:blank";
tinymce.DOM.setStyles(iframe, { display: "none" });
tinymce.dom.Event.add(iframe, 'load', function(ev) {
var result = window.frames[iframeName].result;
if (result && result.url) {
return callback(result.url);
} else if (false && result && result.error) {
alert("Wait, there was an error:\n\r\n\r" + result.error);
} else {
var somethingPotentiallyHorrible = window.frames[iframeName].document.getElementsByTagName("body")[0].innerHTML;
if (somethingPotentiallyHorrible) {
alert("Something unexpected happened:\n\r\n\r" + somethingPotentiallyHorrible);
}
}
//cleanup
setTimeout(function() { callback = null; tinymce.DOM.remove(iframe); }, 123);
});
form.target = iframeName;
tinymce.DOM.add(document.body, iframe);
},
insertMediaAndClose: function(url) {
if (!url) return;
//todo: (heskew) needs more awesome
var markup = /\.(jpe?g|png|gif)$/i.test(url)
? "<img src=\"" + url + "\" />"
: "<a href=\"" + url + "\">" + url + "</a>";
tinyMCE.activeEditor.execCommand("mceInsertContent", false, markup);
tinyMCEPopup.close();
} }
}; };